webentwicklung-frage-antwort-db.com.de

jQuery UI-Autovervollständigung mit JSON

In Ordnung, ich habe mein Gehirn damit beschäftigt (unfassbar in diesem Punkt), aber Sie haben alles versucht, was ich kann, und können es trotzdem nicht zum Laufen bringen.

versuch, mit Jquery UI Autocomplete auszuführen

mein json sieht so aus

{"dealers":
     {
         "1156":"dealer 1",
         "1122":"dealer 2",
         "1176":"dealer 3",
         "1491":"dealer 4",
         "1463":"dealer 5",
         "269":"dealer 6"
    }
}

ich versuche, diese Informationen als Quelle für die automatische Vervollständigung zu verwenden. Ich bekomme das Antwortobjekt gut. Ich habe nur Probleme damit, es in das richtige Format zu bringen, so dass ich das "###" in einem versteckten Feld platzieren kann, das an den "Wert" gebunden ist, der als Teil des Dropdown-Liste.

ich habe eine Million verschiedene Möglichkeiten ausprobiert, aber ein neuer Versuch war unten

function ajaxCall() {
    $.getJSON("/example/location/example.json?term=" + $('#dealerName').val(),
        function(data) {
        $.each(data.dealers, function(k, v) {                
                alert(k + ' : ' + v);
        });
    });        
}

$('#dealerName').autocomplete({
    source: ajaxCall,
    minLength: 2,
    delay: 100
});

Bitte und vielen Dank!

31
Chris Worrell

Sie müssen das Objekt, das Sie erhalten, in das von jQueryUI erwartete Format in ein Array umwandeln.

Sie können $.map verwenden, um das dealers-Objekt in dieses Array zu transformieren.

$('#dealerName').autocomplete({
    source: function (request, response) {
        $.getJSON("/example/location/example.json?term=" + request.term, function (data) {
            response($.map(data.dealers, function (value, key) {
                return {
                    label: value,
                    value: key
                };
            }));
        });
    },
    minLength: 2,
    delay: 100
});

Wenn Sie ein Element auswählen, wird der "Schlüssel" in das Textfeld eingefügt. Sie können dies ändern, indem Sie die label- und value-Eigenschaften ändern, die die Callback-Funktion von $.map zurückgibt.

Wenn Sie Zugriff auf den serverseitigen Code haben, der den JSON generiert, können Sie alternativ die Art und Weise ändern, in der die Daten zurückgegeben werden. Solange die Daten:

  • Ist ein Array von Objekten, die eine label-Eigenschaft, eine value-Eigenschaft oder beides oder haben
  • Ist ein einfaches Array von Strings

Mit anderen Worten, wenn Sie die Daten wie folgt formatieren können:

[{ value: "1463", label: "dealer 5"}, { value: "269", label: "dealer 6" }]

oder dieses:

["dealer 5", "dealer 6"]

Dann wird Ihr JavaScript viel einfacher:

$('#dealerName').autocomplete({
    source: "/example/location/example.json"
});
65
Andrew Whitaker

Ich verstehe, dass es bereits beantwortet wurde. Aber ich hoffe, dass dies in Zukunft jemandem helfen wird und so viel Zeit und Schmerz spart.

der komplette Code ist unten: Dies ist ein Textfeld, das in CiviCRM automatisch vervollständigt werden soll. Hoffe es hilft jemandem

CRM.$( 'input[id^=custom_78]' ).autocomplete({
            autoFill: true,
            select: function (event, ui) {
                    var label = ui.item.label;
                    var value = ui.item.value;
                    // Update subject field to add book year and book product
                    var book_year_value = CRM.$('select[id^=custom_77]  option:selected').text().replace('Book Year ','');
                    //book_year_value.replace('Book Year ','');
                    var subject_value = book_year_value + '/' + ui.item.label;
                    CRM.$('#subject').val(subject_value);
                    CRM.$( 'input[name=product_select_id]' ).val(ui.item.value);
                    CRM.$('input[id^=custom_78]').val(ui.item.label);
                    return false;
            },
            source: function(request, response) {
                CRM.$.ajax({
                    url: productUrl,
                        data: {
                                        'subCategory' : cj('select[id^=custom_77]').val(),
                                        's': request.term,
                                    },
                    beforeSend: function( xhr ) {
                        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
                    },

                    success: function(result){
                                result = jQuery.parseJSON( result);
                                //console.log(result);
                                response(CRM.$.map(result, function (val,key) {
                                                         //console.log(key);
                                                         //console.log(val);
                                                         return {
                                                                 label: val,
                                                                 value: key
                                                         };
                                                 }));
                    }
                })
                .done(function( data ) {
                    if ( console && console.log ) {
                     // console.log( "Sample of dataas:", data.slice( 0, 100 ) );
                    }
                });
            }
  });

PHP-Code zur Rückgabe von Daten an diesen Jquery-Ajax-Aufruf in Autocomplete:

/**
 * This class contains all product related functions that are called using AJAX (jQuery)
 */
class CRM_Civicrmactivitiesproductlink_Page_AJAX {
  static function getProductList() {
        $name   = CRM_Utils_Array::value( 's', $_GET );
    $name   = CRM_Utils_Type::escape( $name, 'String' );
    $limit  = '10';

        $strSearch = "description LIKE '%$name%'";

        $subCategory   = CRM_Utils_Array::value( 'subCategory', $_GET );
    $subCategory   = CRM_Utils_Type::escape( $subCategory, 'String' );

        if (!empty($subCategory))
        {
                $strSearch .= " AND sub_category = ".$subCategory;
        }

        $query = "SELECT id , description as data FROM abc_books WHERE $strSearch";
        $resultArray = array();
        $dao = CRM_Core_DAO::executeQuery( $query );
        while ( $dao->fetch( ) ) {
            $resultArray[$dao->id] = $dao->data;//creating the array to send id as key and data as value
        }
        echo json_encode($resultArray);
    CRM_Utils_System::civiExit();
  }
}
1
Developer

Ich benutze dieses Skript für die Autovervollständigung ...

$('#custmoers_name').autocomplete({
    source: function (request, response) {

        // $.getJSON("<?php echo base_url('index.php/Json_cr_operation/autosearch_custmoers');?>", function (data) {
          $.getJSON("Json_cr_operation/autosearch_custmoers?term=" + request.term, function (data) {
          console.log(data);
            response($.map(data, function (value, key) {
                console.log(value);
                return {
                    label: value.label,
                    value: value.value
                };
            }));
        });
    },
    minLength: 1,
    delay: 100
});

Mein Json kehrt zurück: - [{"label":"Mahesh Arun Wani","value":"1"}] nach der Suche m

aber es wird in Dropdown [object object]... angezeigt.

0
Mahesh Wani