web-dev-qa-db-fra.com

jQuery UI autocomplete avec item et id

J'ai le script suivant qui fonctionne avec un tableau à 1 dimension. Est-il possible d'obtenir que cela fonctionne avec un tableau à 2 dimensions? Ensuite, quel que soit l'élément sélectionné, en cliquant sur un deuxième bouton de la page, l'identifiant de l'élément sélectionné doit s'afficher.

C'est le script avec le tableau à 1 dimension:

var $local_source = ["c++", "Java", "php", "coldfusion", "javascript", "asp", "Ruby"];
$("#txtAllowSearch").autocomplete({
    source: $local_source
});

Voici le script du bouton pour vérifier l'id, qui est incomplet:

$('#button').click(function() {
    // alert($("#txtAllowSearch").someone_get_id_of_selected_item);
});
javascriptjqueryarraysjquery-uijquery-ui-autocomplete
50
oshirowanen

Vous devez utiliser les propriétés ui.item.label (le texte) et ui.item.value (l'id)

$('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearchID").val()); // get the id from the hidden input
});

[Modifier] Vous avez également demandé comment créer le tableau multidimensionnel ...

Vous devriez pouvoir créer le tableau comme ceci:

var $local_source = [[0,"c++"], [1,"Java"], [2,"php"], [3,"coldfusion"], 
                     [4,"javascript"], [5,"asp"], [6,"Ruby"]];

Pour plus d'informations sur l'utilisation des tableaux multidimensionnels, cliquez ici: http://www.javascriptkit.com/javatutors/literal-notation2.shtml

71
JK.

À partir de l'onglet Présentation du plugin jQuery autocomplete:

Les données locales peuvent être un simple tableau de chaînes, ou il contient des objets pour chaque élément du tableau, avec soit un étiquette ou propriété de valeur ou les deux. Le La propriété label est affichée dans le fichier menu de suggestion. La valeur sera inséré dans l'élément d'entrée après l'utilisateur a sélectionné quelque chose dans le menu. Si une seule propriété est spécifié, il sera utilisé à la fois, par exemple. si vous ne fournissez que value-properties, la valeur sera également être utilisé comme étiquette.

Ainsi, votre tableau "bidimensionnel" pourrait ressembler à ceci:

var $local_source = [{
    value: 1,
    label: "c++"
}, {
    value: 2,
    label: "Java"
}, {
    value: 3,
    label: "php"
}, {
    value: 4,
    label: "coldfusion"
}, {
    value: 5,
    label: "javascript"
}, {
    value: 6,
    label: "asp"
}, {
    value: 7,
    label: "Ruby"
}];

Vous pouvez accéder aux propriétés d'étiquette et de valeur dans focus et select event via l'argument ui à l'aide de ui.item.label et ui.item.value.

Modifier

On dirait que vous devez "annuler" le focus et sélectionner des événements pour qu'il ne place pas les numéros d'identification dans les zones de texte. Ce faisant, vous pouvez copier la valeur dans une variable masquée. Voici un exemple .

34
Salman A

Mon code ne fonctionnait que lorsque j'ai ajouté 'return false' à la fonction select. Sans cela, l'entrée était définie avec la bonne valeur à l'intérieur de la fonction select, puis à la valeur id après la fin de la fonction select. Le retour faux a résolu ce problème.

$('#sistema_select').autocomplete({

    minLength: 3,
    source: <?php echo $lista_sistemas;?> ,
    select: function (event, ui) {
         $('#sistema_select').val(ui.item.label); // display the selected text
         $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input
         return false;
     },
    change: function( event, ui ) {
        $( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 );
    } 
});

De plus, j’ai ajouté une fonction à l’événement change car, si l’utilisateur écrit quelque chose dans l’entrée ou efface une partie du libellé de l’élément après qu’un élément a été sélectionné, je dois mettre à jour le champ masqué de manière à ne pas obtenir ID incorrect (obsolète). Par exemple, si ma source est:

var $local_source = [
       {value: 1,  label: "c++"}, 
       {value: 2,  label: "Java"}]

et le type d'utilisateur ja et sélectionnez l'option 'Java' avec la saisie semi-automatique, je stocke la valeur 2 dans le champ masqué. Si l'utilisateur efface une lettre de 'Java', par exemple se terminant par 'jva' dans le champ de saisie, je ne peux pas transmettre à mon code l'identifiant 2, car l'utilisateur a modifié la valeur. Dans ce cas, je mets l'id à 0.

10
Paty Lustosa

Je veux juste partager ce qui a fonctionné de mon côté, au cas où il serait capable d'aider quelqu'un d'autre aussi. Sinon, sur la base de la réponse de Paty Lustosa ci-dessus, permettez-moi d'ajouter une autre approche dérivée de ce site où il utilisait une approche ajax pour la méthode source.

http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3

Le kicker est le format "chaîne" ou json résultant de votre script php (listing.php ci-dessous). Le jeu de résultats à afficher dans le champ de saisie semi-automatique devrait ressembler à ceci:

    {"list":[
     {"value": 1, "label": "abc"},
     {"value": 2, "label": "def"},
     {"value": 3, "label": "ghi"}
    ]}

Ensuite, sur la partie source de la méthode autocomplete:

    source: function(request, response) {
        $.getJSON("listing.php", {
            term: request.term
        }, function(data) {                     
            var array = data.error ? [] : $.map(data.list, function(m) {
                return {
                    label: m.label,
                    value: m.value
                };
            });
            response(array);
        });
    },
    select: function (event, ui) {
        $("#autocomplete_field").val(ui.item.label); // display the selected text
        $("#field_id").val(ui.item.value); // save selected id to hidden input
        return false;
    }

J'espère que cela aide ... tout le meilleur!

7
Benjohn P. Villedo
<script type="text/javascript">
$(function () {
    $("#MyTextBox").autocomplete({
        source: "MyDataFactory.ashx",
        minLength: 2,
        select: function (event, ui) {
            $('#MyIdTextBox').val(ui.item.id);
            return ui.item.label;
        }
    });
});

Les réponses ci-dessus ont aidé, mais n'ont pas fonctionné dans mon implémentation ..__ au lieu d'utiliser la définition de la valeur à l'aide de jQuery, je renvoie la valeur de la fonction à l'option de sélection.

La page MyDataFactory.ashx a une classe avec trois propriétés Id, Label, Value.

Passez la liste dans le sérialiseur JavaScript et renvoyez la réponse.

3
Eric Rohlfs

En supposant que les objets de votre tableau source aient une propriété id ...

var $local_source = [
    { id: 1, value: "c++" },
    { id: 2, value: "Java" },
    { id: 3, value: "php" },
    { id: 4, value: "coldfusion" },
    { id: 5, value: "javascript" },
    { id: 6, value: "asp" },
    { id: 7, value: "Ruby" }];

En mettant la main sur l'instance actuelle et en inspectant sa propriété selectedItem, vous pourrez récupérer les propriétés de l'élément actuellement sélectionné. Dans ce cas, alerter l'id de l'élément sélectionné.

$('#button').click(function() {
    alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id;
});
3
Nattrass

Je ne pense pas qu'il soit nécessaire de modifier les propriétés de valeur et d'étiquette, d'utiliser des champs de saisie masqués ou de supprimer des événements. Vous pouvez ajouter votre propre propriété personnalisée à chaque objet de saisie semi-automatique, puis lire la valeur de cette propriété ultérieurement.

Voici un exemple.

$(#yourInputTextBox).autocomplete({
    source: function(request, response) {
        // Do something with request.term (what was keyed in by the user).
        // It could be an AJAX call or some search from local data.
        // To keep this part short, I will do some search from local data.
        // Let's assume we get some results immediately, where
        // results is an array containing objects with some id and name.
        var results = yourSearchClass.search(request.term);

        // Populate the array that will be passed to the response callback.
        var autocompleteObjects = [];
        for (var i = 0; i < results.length; i++) {
            var object = {
                // Used by jQuery Autocomplete to show
                // autocomplete suggestions as well as
                // the text in yourInputTextBox upon selection.
                // Assign them to a value that you want the user to see.
                value: results[i].name;
                label: results[i].name;

                // Put our own custom id here.
                // If you want to, you can even put the result object.
                id: results[i].id;
            };

            autocompleteObjects.Push(object);
        }

        // Invoke the response callback.
        response(autocompleteObjects);
    },
    select: function(event, ui) {
        // Retrieve your id here and do something with it.
        console.log(ui.item.id);
    }
});

La documentation mentionne que vous devez passer un tableau d'objets avec les propriétés label et value. Cependant, vous pouvez certainement passer des objets avec plus que ces deux propriétés et les lire plus tard.

Voici la partie pertinente à laquelle je me réfère.

Tableau: un tableau peut être utilisé pour les données locales. Il y a deux supportés formats: Un tableau de chaînes: ["Choice1", "Choice2"] Un tableau de objets avec les propriétés label et value: [{label: "Choice1", valeur: "valeur1"}, ...] La propriété label est affichée dans la suggestion menu. La valeur sera insérée dans l'élément d'entrée lorsqu'un utilisateur sélectionne un article. Si une seule propriété est spécifiée, elle sera utilisée pour les deux, par exemple, si vous ne fournissez que des propriétés de valeur, la valeur sera également être utilisé comme étiquette.

2
Kevin Lee

Enfin, je l'ai fait Merci beaucoup d'amis, et un merci spécial à M. https://stackoverflow.com/users/87015/salman-a en raison de son code, j'ai pu le résoudre correctement. enfin, mon code ressemble à ceci car j'utilise groovy grails, j'espère que cela aidera quelqu'un là-bas .. Merci beaucoup 

le code html ressemble à ceci dans ma page gsp

  <input id="populate-dropdown" name="nameofClient" type="text">
  <input id="wilhaveid" name="idofclient" type="text">

la fonction de script est comme ça dans ma page gsp

  <script>
        $( "#populate-dropdown").on('input', function() {
            $.ajax({
                url:'autoCOmp',
                data: {inputField: $("#populate-dropdown").val()},
                success: function(resp){
                    $('#populate-dropdown').autocomplete({
                        source:resp,
                        select: function (event, ui) {
                            $("#populate-dropdown").val(ui.item.label);
                            $("#wilhaveid").val(ui.item.value);
                             return false;
                        }
                    })
                }
            });
        });
    </script>

Et mon code de contrôleur est comme ça

   def autoCOmp(){
    println(params)
    def c = Client.createCriteria()
    def results = c.list {
        like("nameOfClient", params.inputField+"%")
    }

    def itemList = []
    results.each{
        itemList  << [value:it.id,label:it.nameOfClient]
    }
    println(itemList)
    render itemList as JSON
}

Une dernière chose que je n'ai pas définie de champ d'identifiant masqué car au début, je vérifiais que j'obtenais l'identifiant exact, vous pouvez le garder masqué en mettant simplement type = hidden au lieu de texte pour le second élément d'entrée en HTML

Merci !

2
Aadil Masavir

Cela peut être fait sans utiliser de champ caché. Vous devez tirer parti de la capacité de JQuerys de créer des attributs personnalisés au moment de l’exécution. 

('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input
});
2
Waris Ali

J'ai essayé ci-dessus l'affichage du code (valeur ou ID) dans la zone de texte au lieu du texte Label. Après cela, j'ai essayé event.preventDefault (), il fonctionne parfaitement ... 

var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}]

$(".jquery-autocomplete").autocomplete({
    source: e,select: function( event, ui ) {
        event.preventDefault();
        $('.jquery-autocomplete').val(ui.item.label);
        console.log(ui.item.label);
        console.log(ui.item.value);
    }
});
1
HIR