jQuery UI/Autocomplete - Comment changer les noms de variables par défaut?

Question

jQuery UI Autocomplete utilise les noms de variables "valeur", "id " et "étiquette" pour créer la liste déroulante. Par exemple:

La fonction select: est bien sûr exécutée lorsque je clique sur un élément dans la liste déroulante. Cependant, je ne semble avoir aucun contrôle sur le nom de la variable (ui.item.label) qu'il utilise pour remplir la liste déroulante. Il en va de même lorsque je clique dans la liste et qu'il saisit la valeur (ui.item.value) dans le champ de saisie.

Existe-t-il un moyen simple de modifier les noms de variable par défaut qu'il utilise pour remplir la liste déroulante et le champ de saisie?

• La raison est que je reçois les données JSON à partir d'un serveur distant sur lequel je ne contrôle pas.

• Je n'ai pas envie de modifier le fichier .js, car il est probable qu'il publiera régulièrement de nouvelles versions du .js.

• Ce que j'aimerais vraiment, c'est pouvoir éditer les variables et leur contenu entre le rappel du serveur et l'ouverture du menu déroulant.

Nous vous remercions de votre temps.

Answer 1

J'ai oublié d'écrire ma réponse ici. Je l'ai compris. Il y a un gestionnaire de succès intégré dans le code de saisie semi-automatique. Avec lui, vous pouvez récupérer les variables du serveur et les regrouper dans les variables appropriées (id, label, value). Utilisez-le comme ceci:

$("#cities").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "http://ws.geonames.org/searchJSON", 
      dataType: "jsonp", 
      data: { 
       featureClass: "P", 
       style: "full", 
       maxRows: 12, 
       name_startsWith: request.term 
      }, 
      success: function(data) { 
       response($.map(data.geonames, function(item) { 
        return { 
         label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
         value: item.name 
        } 
       })) 
      } 
     }) 
    }, 
    minLength: 2, 
    select: function(event, ui) { 
     // when clicked in list 
    }, 
    open: function() { 
     // triggered when the list is opened 
    }, 
    close: function() { 
     // triggered when the list is hidden 
    } 
});