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/

如何获得价值？

感谢advance =）

Answer 1

在自动完成的select事件中，您将标签设置为元素#site_client_first的value属性，即此处为$（＆＃34;＃site_client_first＆＃34;）。val（ui.item.label）。因此，当您尝试通过分配$（＆＃34;＃site_client_first＆＃34;）。val（）来设置span的内部HTML时，您将始终获得标签而不是item.value。

尝试以下代码。我添加了一个属性＆quot; itemValue＆＃39;到$（＆＃34;＃site_client_first＆＃34;）。这将保留您的商品的价值和$（＆＃34;＃site_client_first＆＃34;）。val（）将保留商品的标签。

设置span innerhtml时，你可以分配$（＆＃34;＃site_client_first＆＃34;）。attr（＆＃34; itemValue＆＃34;），这是你项目的价值。

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

Answer 2

问题是您尝试将input元素用作select元素。

与select不同，input的值只是写在其中的内容。

autocomplete插件的默认行为是显示给定labels的{{1}}作为建议，当您选择一个时，它会设置相应的source value。您可以通过将input设置为label的{{1}}来覆盖以下代码中的此功能：

value

如果您要删除上面的代码，您会注意到在选择选项时input字段将写在select: function (event, ui) { $("#site_client_first").val(ui.item.label); return false; }元素中。

解决方案1 

我建议您使用value替换input元素。我认为哪种更适合您的需求。如果您需要搜索选项，可能需要使用chosen或select2等插件。

解决方案2

如果您热衷于将input与select一起使用，请将该值设置为input回调中的额外属性

autocomplete

您可以使用

检索值

select

演示：https://jsfiddle.net/fyz8vL3a/1/

jQuery ui autocomplete在其他函数中获取所选项

2 个答案: