J'ai beaucoup de difficulté à faire fonctionner le widget autocomplete de JQuery pour moi. J'utilise une liste de paires de clés / de valeur d'un serveur.
J'ai les exigences suivantes: p>
Si l'utilisateur sélectionne une valeur dans le widget, je souhaite transmettre l'ID sur le serveur. p>
Si l'utilisateur ne sélectionne pas de valeur et entre du texte brut ou modifie une valeur qui a déjà été sélectionnée, je souhaite que le champ ID soit effacé et que le texte brut soit envoyé au serveur. . P>
supposons que Initialement, j'ai défini le widget autocomplete up comme: p> Modification de la sélection même en volant sur l'un des éléments change le texte dans la zone de texte référencée par $ ( entrée) à la clé sous-jacente, plutôt que l'étiquette. Ceci est fortement indésirable à partir d'un point de vue de l'interaction de l'utilisateur - en effet, la raison même pour laquelle je suis en train d'enquêter sur cette question, car les utilisateurs du site que je suis construit ont été systématiquement déconcertés par le texte qu'ils entraient apparemment en numéros aléatoires! P> J'ai ajouté un champ masqué dans la zone de texte et implémenté les événements SELECT () et FOCUS () afin de manipuler l'identifiant comme: P> SomeAjaxFunction code> renvoie un tableau d'objets que le widget Autocomplete attend: {étiquette: étiquette, valeur: clé} code>. P>. $(input).autocomplete({
source: sourceFunction,
minLength: 1
focus: function(event, ui) {
$(idField).val(ui.item.value);
$(this).val(ui.item.label);
return false;
},
select: function(event, ui) {
$(idField).val(ui.item.value);
$(this).val(ui.item.label);
return false;
},
minLength: 1
});
4 Réponses :
La façon dont je fais que je fais un autocomplete, est de créer un conteneur div contenant l'entrée. Lorsque je sélectionne un élément, j'ajoute un lien contenant une portée au conteneur et je masque la boîte d'entrée.
Le lien et la portée sont stylés de sorte qu'il ressemble à un bouton, avec un X et dispose d'un gestionnaire d'événements de clic pour retirer l'entrée de la DOM, effacer le champ masqué et réafficher la zone d'entrée lorsque vous avez cliqué. Donc, lorsqu'un élément est sélectionné: et quand un élément n'est pas sélectionné: De cette façon, vous êtes Soit forcé de sélectionner un élément ou de saisir du texte de formulaire libre. Sur le backend, si le paramètre de demande avec clé 'myvalue' est vide, vous préféreriez plutôt regarder le paramètre de demande avec la clé "myAutocomplete".
De plus, dans le gestionnaire de sélection de l'auto-autocomplète JQuery Ui, chaque fois que vous sélectionnez un élément, vous pouvez créer un champ masqué avec le même nom. Donc, si vous sélectionnez plusieurs pays, apportez le nom de nom de champ masqué «Pays». Si vous cliquez sur une entrée pour la supprimer, il supprime le champ masqué associé. Du côté du serveur, vous finissez par récupérer une liste d'ID séparée par des virgules qui doit être divisée et convertie en un réseau entier / long.
C'est une bonne suggestion et en l'absence de tout simple, c'est comme ça que je vais y aller. Idéalement, je préférerais quelque chose qui nécessite beaucoup moins de bâtiment sur le widget de l'interface utilisateur JQuery - il me semble que le widget devrait soutenir ce que je veux faire plus ou moins hors de la boîte.
Eh bien, j'ai été chargé de quelque chose de similaire pour que je cherche aussi des suggestions sur la façon de bien faire :) Glad ma suggestion a aidé! Une autre chose est que l'on utilise la même page pour la création et la mise en oeuvre - lors de la rechargement de la page lors de la modification, vous devez recréer toutes les étendues etc. pour les valeurs dans le champ caché. Pour le moment, je fais juste cela sur le côté serveur. Seul problème est que des choses comme des cours utilisées maintenant doivent être maintenues dans le code avant et le code du backend ... Je n'aime pas cela mais ça marche.
Et si cela a fonctionné pour vous, n'oubliez pas de marquer comme une réponse :)
Lorsque je présume que vous avez les champs suivants, définissez:
$(document).ready(function() {
$('.autocomplete-reference').each(function () {
$(this).keydown(function(e){
/*
* this will reset hidden id reference on each visible field manual change
* we have to bind it on keydown because we want to recognize event of submiting form by enter after autocomplete set
*/
if (e.keyCode != 13) {
$(this).siblings('input[type=hidden]').each(function () {
$(this).val('');
});
}
});
$(this).autocomplete({
minLength: 1,
/* you can set appending of autocomplete menu into some container to set css contextually
appendTo: '#someElem',*/
source: sourceFunction,
search:function (event, ui) {
//TODO ...spinner init...
},
open:function (event, ui) {
/* you can grab autocomplete menu widget by this to manipulate some recognizing id, etc..
* $(this).autocomplete('widget')
*/
//TODO ..stop spinner ...
$(this).keydown(function(e){
/* this is important for live reference updates while arrow keys changes */
if (e.keyCode == 37 || e.keyCode == 39) {
$($(this).data('autocomplete').menu.active).find('a').trigger('click');
}
});
},
focus: function(event, ui) {
/* here we'll map our data object onto both fields */
$(this).val(ui.item.label);
$(this).siblings('input[type=hidden]').each(function () {
$(this).val(ui.item.key);
});
},
select: function(event, ui) {
/* here we'll map our data object onto both fields */
$(this).val(ui.item.label);
$(this).siblings('input[type=hidden]').each(function () {
$(this).val(ui.item.key);
});
},
close: function(event, ui) {
//TODO ..stop spinner ...
}
});
});
});
Bien que sa vieille question, ma méthode peut aider.
sur Goto Pour plus de détails: Ici, c'est dans la liste des sources d'Ajax, mais l'entraînement est similaire.
Rechercher un texte dans JQuery Autocomplete UI
Cette chose me troublait plusieurs fois et finalement, je l'ai finalement compris :) .Change événement Vous pouvez rechercher la valeur de la zone de texte avec la valeur dans votre liste source à l'aide de la boucle.
Vous pouvez utiliser event.preventDefault Collectez vos valeurs sélectionnées via ui.item.label ou ui.item.value et obtenez la valeur nécessaire et définissez-la sur la même zone de texte.
Désolé, puis-je clarifier quelque chose? Au moins un de vos problèmes est que vous souhaitez que la boîte d'identité soit remplie de l'ID associé si l'utilisateur entre une valeur comportant une carte d'identité correspondante, ou quel que soit l'utilisateur en tapant s'il n'y a pas de Valeur correspondante - Correct / incorrect?
Nah, je veux juste que le champ ID caché soit vide si le texte de la zone de texte est défini sur quelque chose qui ne correspond pas à une sélection offerte par l'autocomplete.