如何从 onchange 事件外部获取 jQuery UI 自动完成值？

Question

我正在使用 jQuery UI 1.12。我有一个输入字段，我使用代码将其变成自动完成选择

$("#myFilter").autocomplete({source: myItems});

然后我在初始化时使用自动选择一个项目

$("#myFilter").autocomplete("search", defaultValue);

我的问题是，如何获取所选项目的所选 ID？如果我在“onchange”事件中，我可以这样做

$( "#myFilter" ).on( "autocompleteselect", function( event, ui ) {

    var id = ui.item.value;

但是，我不在 onchange 事件中，因此我不确定如何提取选定的值。

Answer 1

小部件工厂根据名为"ui<Widgetname>" 的jquery 数据属性存储其内部数据。对于自动完成小部件，它是uiAutocomplete。所选项目存储为selectedItem（默认情况下，这是一个包含label 和value 键的普通对象，但如果需要，可以通过源和渲染方法更改它以保存更多数据）。所以你可以这样做：

$("#myFilter").data("uiAutocomplete").selectedItem.label

或

$("#myFilter").data("uiAutocomplete").selectedItem.value

这是一个基于使用文档的 jsfiddle 示例：http://jsfiddle.net/xt6482wm/3/

Answer 2

可以通过多种方法访问该值。

方法一：由于自动补全是在input元素上构造的，所以可以直接从该元素的jQuery对象中获取值。

方法2：jQuery构造返回一个数组，第一个值指向元素的DOM。因此使用value从DOM访问。

方法3：jQuery 将其custom data 附加到元素的包装器中。所有的选项、默认值和方法都在一个对象中定义，并分配给ui-autocomplete/uiAutocomplete 键。两者都可以用来访问data。由于 dashed-attributes 在内部转换为 camelCased。 MDN Docs for reference

var options = ["Tamil","English","Spanish","Italian","French"];

$("#lang").autocomplete({source:options});

function getValue()
{
    console.log("Using method 1 : "+$("#lang").val());
    console.log("Using method 2 : "+$("#lang")[0].value);
    console.log("Using method 3 : "+$("#lang").data("ui-autocomplete").selectedItem.value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input id="lang">
<button onclick="getValue()">Get Selected Value</button>