EasyAutocompleteプラグインでIDとフィールド値を取得

Question

easyAutocompleteプラグインを使用して、入力フィールドを自動補完して選択した値をドロップダウンに表示します。 私がしたいことは、値のidを持つ隠しフィールドがあることです。私は私のユーザーからのエミリーを選択すると

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

     } 
    ] 

、私のドロップダウンが彼女の仕事の場所で満たされます：

私のJSONファイルは、このような何かを返します。 位置情報のIDを隠しフィールドに保存してコントローラに送信するにはどうすればよいですか？

これは私の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); 

}); 
    } 

私が取得し、IDを渡すにはどうすればよいですか？

EDIT： 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

easyAutocomplete問題： - ：

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

HTMLの問題を あなたのコードをよりこのようにする必要がありますが（remote data source exampleを参照してください）あなたは一度だけeasyAutocompleteを呼び出す必要があり、すなわち、 ： selectの外にinputを移動し、両方の名前を付けます（値をサーバーに送信できるようになります）。あなたのeasyAutocomplete onClickEventハンドラから

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); 
     } 
     }); 
    }); 
} 

コールupdateSelect：選択値の変更は、あなたが変更ハンドラを必要とするとき

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

は隠しフィールドの値を設定するには

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