Question

使用easyAutocomplete插件，我自动填充输入字段并获取所选值并在下拉列表中显示它们。我想要做的是，有一个隐藏字段，其值为id。

我的JSON文件返回如下内容：

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

      } 
   ]

一旦我从用户中选择了Emily，我的下拉菜单就会填满她的工作地点。如何在隐藏字段中保存位置的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？

编辑： 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问题：您的代码应该更像这样（请参阅remote data source example） - 即您只应拨打easyAutocomplete一次：

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

HTML问题：将input移到select之外，并为它们指定两个名称（以便将值提交给服务器）：

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

要在选择值更改时设置隐藏字段的值，您需要一个更改处理程序：

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

从easyAutocomplete onClickEvent处理程序调用{{1}}：

updateSelect

在EasyAutocomplete插件中获取id和字段值

1 个答案: