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() 来设置 span 的 innerHTML 时，您将始终获得标签而不是您的 item.value。

试试下面的代码。我在 $("#site_client_first") 中添加了一个属性“itemValue”。这将保存您的项目的价值，而 $("#site_client_first").val() 将保存项目的标签。

在设置跨度 innerhtml 时，您分配 $("#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");
}    

Answer 2

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

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

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

select: function (event, ui) {
     $("#site_client_first").val(ui.item.label);
     return false;
}

如果您要删除上面的代码，您会注意到value 字段将在选择选项时写入input 元素。

解决方案 1

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

解决方案 2

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

select: function (event, ui) {
    $("#site_client_first").val(ui.item.label); // what the user sees
    $("#site_client_first").attr('data-realValue', ui.item.value); // value is hidden
    return false;
}

您可以使用

检索值

$("#site_client_first").attr('data-realValue');

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