Get id et une valeur de champ dans le plugin EasyAutocomplete

Question

En utilisant le plugin easyAutocomplete, j'auto complète un champ de saisie et prends la valeur sélectionnée et l'affiche dans une liste déroulante. Ce que je veux faire, c'est avoir un champ caché qui aurait l'ID de la valeur.

Mon JSON retourne fichier quelque chose comme ceci:

{ "name": "Emily" 
    "id" : 1 
    "jobData": [ 
    { 
     "id":1 
     "loc":"AL" 
     }, 
    { 
     "id":2 
     "loc":"BG" 

     } 
    ] 

Une fois que je sélectionne Emily de mes utilisateurs, mon menu déroulant se remplit de lieux de son travail. Comment puis-je également enregistrer l'ID de l'emplacement dans un champ masqué afin de pouvoir l'envoyer à mon contrôleur?

Ceci est ma fonction JS:

function AutoCompleteS() { 
    $("#basics").keyup(function(e) { 
    this.query = e.target.value; 
     var options = { 
       url: function(query) { 
        return "/getUser/"+ query 
       }, 

       getValue:"name" 

       list: { 

         onClickEvent: function() { 
         var value = $("#basics").getSelectedItemData(); 
         function toArray(value){ 
          return value.loc; 
         } 

         var allLocations=value.jobData.map(toArray); 

         $.each(allLocations,function(i,p){ 
          $('#select').append($('<option></option>').val(p).html(p)); 
         }) 


         } 
        } 

      }; 

     $('#basics').easyAutocomplete(options); 

}); 
    } 

Comment puis-je obtenir et passer l'id?

EDIT: code html:

 <label for="client1" class=" control-label">First Client</label> <input type="text" name="client" value="" class="form-control input-lg " id="basics"/> 
    <label for="sel1">Select location:</label> 
    <select class="form-control input-lg" id="select" > 
    <option></option> 
    <input type="text" class="hidden" /> 
    </select> 

Answer 1

questions easyAutocomplete: Votre code devrait être plus comme celui-ci (voir remote data source example) - dire que vous ne devez appeler easyAutocomplete fois:

$("#basics").easyAutocomplete({ 
    url: function(query) { 
    return "/getUser/" + query; 
    }, 
    getValue: "name", 
    list: { 
    // ... 
    } 
}); 

questions HTML : Déplacez le input en dehors du select et attribuez-leur les deux noms (afin que les valeurs puissent être envoyées au serveur):

<select class="form-control input-lg" id="select" name="location"> 
<option></option> 
</select> 
<input type="text" class="hidden" name="job-id" id="job-id"> 

Pour définir la valeur du champ caché lorsque la valeur de sélection des changements, vous avez besoin d'un gestionnaire de changement:

function updateSelect(jobData) { 
    // Reset options: 
    $("#select") 
    .empty() 
    .append(new Option()); 

    // Add locations: 
    jobData.forEach(function(job) { 
    $("#select").append(new Option(job.loc)); 
    }); 

    // Handle dropdown change: 
    $("#select") 
    .off("change") 
    .on("change", function() { 
     // Reset job id (needed when user selects blank option at top of dropdown) 
     $("#job-id").val(""); 

     var selectedLocation = this.value; 
     jobData.forEach(function(job) { 
     if (job.loc === selectedLocation) { 
      // Copy job id to hidden field: 
      $("#job-id").val(job.id); 
     } 
     }); 
    }); 
} 

Appel updateSelect de votre gestionnaire easyAutocomplete onClickEvent:

onClickEvent: function() { 
    var value = $("#basics").getSelectedItemData(); 
    updateSelect(value.jobData); 
}