Autocomplete appliquant la valeur pas label à la zone de texte

J’ai des problèmes à essayer de faire fonctionner la saisie semi-automatique correctement.

Tout me semble correct mais ….

 $(function () { $("#customer-search").autocomplete({ source: 'Customer/GetCustomerByName', minLength: 3, select: function (event, ui) { $("#customer-search").val(ui.item.label); $("#selected-customer").val(ui.item.label); } }); });  
@Html.Hidden("selected-customer")

Cependant, lorsque je sélectionne un élément dans la liste déroulante, la valeur est appliquée à la zone de texte au lieu de l’étiquette.

Qu’est ce que j’ai mal fait?

Si je regarde la source en utilisant Firebug, je peux voir que mon champ caché est mis à jour correctement.

Le comportement par défaut de l’événement select consiste à mettre à jour l’ input avec ui.item.value . Ce code s’exécute après votre gestionnaire d’événements.

Retournez simplement false ou appelez event.preventDefault() pour empêcher cela. Je recommande également de faire quelque chose de similaire pour que l’événement focus empêche ui.item.value d’être placé dans l’ input lorsque l’utilisateur survole les choix:

 $("#customer-search").autocomplete({ /* snip */ select: function(event, ui) { event.preventDefault(); $("#customer-search").val(ui.item.label); $("#selected-customer").val(ui.item.label); }, focus: function(event, ui) { event.preventDefault(); $("#customer-search").val(ui.item.label); } }); 

Exemple: http://jsfiddle.net/andrewwhitaker/LCv8L/

J’aimerais juste append qu’au lieu de référencer l’élément d’entrée par “id” dans les fonctions de rappel select et focus , vous pouvez utiliser ce sélecteur, comme:

 $(this).val(ui.item.label); 

c’est utile lorsque vous affectez la saisie semi-automatique à plusieurs éléments, c’est-à-dire par classe:

 $(".className").autocomplete({ ... focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label); } }); 

Dans mon cas, je dois enregistrer un autre champ “id” dans une entrée cachée. J’ajoute donc un autre champ dans les données renvoyées par l’appel ajax.

 {label:"Name", value:"Value", id:"1"} 

Et ont ajouté un lien «créer un nouveau» au bas de la liste. En cliquant sur le bouton ‘créer nouveau’, un modal apparaîtra et vous pourrez créer un nouvel élément à partir de là.

 $('#vendorName').autocomplete ( { source: "/Vendors/Search", minLength: 2, response: function (event, ui) { ui.content.push ({ label: 'Add a new Name', value: 'Add a new Name' }); }, select: function (event, ui) { $('#vendorId').val(ui.item.id); }, open: function (event, ui) { var createNewVendor = function () { alert("Create new"); } $(".ui-autocomplete").find("a").last().attr('data-toggle', 'modal').addClass('highLight'); $(".ui-autocomplete").find("a").last().attr('href', '#modal-form').addClass('highLight'); } } ); 

Je pense que le point est que vous pouvez append n’importe quel champ de données supplémentaire autre que «label» et «value».

J’utilise le modal bootstrap et il peut être comme ci-dessous: