javascript - jQuery ui 自动完成获取其他功能中的选定项目

Question

我在 jQuery 自动完成方面遇到问题，我尝试获取输入的值，但得到了标签，但没有得到值。

  var listeClients = [{"value":1,"label":"Orange"},{"value":2,"label":"Blue"}];
  $( "#site_client_first" ).autocomplete({
     source: listeClients,
     select: function (event, ui) {
         $("#site_client_first").val(ui.item.label);
         return false;
  }

为了获取我使用的值:

$("#site_client_first").val();

https://jsfiddle.net/fyz8vL3a/

如何获取值？

提前致谢 =)

Answer 1

在自动完成的选择事件中，您将标签设置为元素 #site_client_first 的值属性，即此处 $("#site_client_first").val(ui.item.label)。因此，当您尝试通过分配 $("#site_client_first").val() 来设置跨度的innerHTML时，您将始终获得标签而不是您的item.value。

尝试下面的代码。我已将属性“itemValue”添加到 $("#site_client_first")。这将保存您的项目的值，$("#site_client_first").val() 将保存项目的标签。

在设置 span insidehtml 时，您可以分配 $("#site_client_first").attr("itemValue") 这是您的项目的值。

<input class="form-control" name="site[client]" id="site_client_first"  itemValue="100" /> 

对 HTML 更改中的上述行进行更改。 您的最终 html 如下:

<input class="form-control" name="site[client]" id="site_client_first"  itemValue="100" />
<button onclick="getValue()">Get</button>
<span id="svalue"></span>

您的脚本位于此处:

$(document).ready(function() {
var listeClients = [{ "value": 1, "label": "Orange"}, {
"value": 2,
"label": "Blue"
}];

$("#site_client_first").autocomplete({
source: listeClients,
select: function(event, ui) {
  $("#site_client_first").val(ui.item.label);
   $("#site_client_first").attr("itemValue", ui.item.value);
  return false;
}
});

})

var getValue = function() {
document.getElementById("value").innerHTML = $("#site_client_first").attr("itemValue");
}

function getValue() {
document.getElementById("value").innerHTML = $("#site_client_first").attr("itemValue");
}