jqueryUI autocomplete avec des données supplémentaires?

Question

Utilisation de jQueryUI Autocomplete

J'aimerais ajouter d'autres données à une liste de résultats de la boîte. Par exemple, mon ensemble de données pourrait ressembler à:

[ 
    { 
     "name": "John's wild bacon emporium", 
     "code": "BACON" 
    }, 
    { 
     "name": "Jill and Jack's well", 
     "code": "WELL" 
    }, 
    { 
     "name": "Herp and derp", 
     "code": "HD" 
    } 
] 

Mais les docs jQueryUI dire qu'il veut un tableau associatif de chaînes.

Les utilisateurs vont chercher par nom, jamais le code (faisons semblant). Plus important encore, je veux être en mesure d'accéder à ce que ce code est en regardant select: function(event, ui) {/*...*/}, que ce soit à travers le data-xxx, ou un autre vaudou. Je voudrais éviter d'utiliser une deuxième liste pour faire correspondre les chaînes avec le contenu de l'étiquette (supposons que nous pouvons avoir des noms en double et que les utilisateurs ne soient jamais confus), je veux juste coller les données du code sur l'étiquette du nom.

Une question comme celle-ci était asked in 2008, mais depuis lors, le plugin n'a plus .result().

Answer 1

Mais les docs de jQueryUI indiquent qu'ils veulent un tableau de chaînes .

Actually:

Les données locales peuvent être un simple, tableau de chaînes, ou contient objets pour chaque élément du tableau, soit avec un étiquette ou valeur propriété ou les deux.

Donc, tant que vos données ont au moins une propriété value pour chaque objet dans le tableau, le widget peut gérer:

[ 
    { 
     "name": "John's wild bacon emporium", 
     "code": "BACON", 
     "value": "Bacon", 
    }, 
    { 
     "name": "Jill and Jack's well", 
     "code": "WELL" 
     "value": "Well" 
    }, 
    { 
     "name": "Herp and derp", 
     "code": "HD", 
     "value": "Herp" 
    } 
] 

la requête de l'utilisateur sera en correspondance avec la propriété value de chaque objet (notez que ce libellé n'est pas obligatoire, spécifiez-le uniquement si vous voulez afficher quelque chose de différent dans la liste des options de saisie semi-automatique que le value).

Vous pouvez accéder aux données supplémentaires sur l'élément à l'intérieur du gestionnaire d'événements select:

select: function(event, ui) { 
    alert(ui.item.code); // Access the item's "code" property. 
} 

espoir qui aide. Voici un exemple simple: http://jsfiddle.net/vR3QH/. J'ai supprimé la propriété name et j'utilise simplement la propriété value à la place. Chaque fois qu'un élément est sélectionné, les éléments input sont mis à jour avec les valeurs des propriétés appartenant à l'élément sélectionné.