web-dev-qa-db-fra.com

jQuery UI autocomplete avec JSON

Bon, je me suis creusé la cervelle à ce sujet (je suis vraiment terrible), mais j'ai essayé de lire tout ce que je pouvais et je ne peux toujours pas le faire fonctionner.

en essayant de faire autocomplete avec jquery ui

mon json ressemble à ça

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

j'essaie d'utiliser cette information comme source pour la saisie semi-automatique. L'objet de réponse est correct, j'ai du mal à l'obtenir dans le bon format pour pouvoir placer le "###" dans un champ masqué lié à la "valeur", qui doit être affiché en tant que partie de l'élément. menu déroulant.

été essayé un million de façons différentes, mais une tentative récente était inférieure à

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
});

S'il vous plaît et merci beaucoup!

jqueryjsonjquery-uiautocompletejquery-ui-autocomplete
31
Chris Worrell

Vous devez transformer l'objet que vous récupérez dans un tableau au format attendu par jQueryUI.

Vous pouvez utiliser $.map pour transformer l'objet dealers dans ce tableau.

$('#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
});

Notez que lorsque vous sélectionnez un élément, la "clé" sera placée dans la zone de texte. Vous pouvez changer cela en modifiant les propriétés label et value que la fonction de rappel de $.map renvoie.

Sinon, si vous avez accès au code côté serveur qui génère le JSON, vous pouvez changer la façon dont les données sont renvoyées. Tant que les données:

  • Est-ce un tableau d'objets ayant une propriété label, une propriété value ou les deux, ou
  • Est-ce un simple tableau de chaînes

En d'autres termes, si vous pouvez formater les données comme ceci:

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

ou ca:

["dealer 5", "dealer 6"]

Ensuite, votre JavaScript devient beaucoup plus simple:

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

Je comprends que sa été déjà répondu. mais j'espère que cela aidera quelqu'un à l'avenir et fera économiser beaucoup de temps et de douleur.

le code complet est ci-dessous: Celui que j'ai créé pour une zone de texte afin de le compléter automatiquement dans CiviCRM. J'espère que ça aide quelqu'un

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 ) );
                    }
                });
            }
  });

Code PHP sur la façon dont je renvoie des données à cet appel jquery ajax en saisie semi-automatique:

/**
 * 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

J'utilise ce script pour l'auto-complétion ...

$('#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
});

Mon retour json: - [{"label":"Mahesh Arun Wani","value":"1"}] après la recherche m

mais il affiche dans la liste déroulante [object object]...

0
Mahesh Wani