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

Posted 2023-05-08

【中文标题】如何从 onchange 事件外部获取 jQuery UI 自动完成值？

【英文标题】：How do I get the jQuery UI autocomplete value from outside an onchange event?

【发布时间】：2018-12-07 22:39:12

【问题描述】：

我正在使用 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 事件中，因此我不确定如何提取选定的值。

【问题讨论】：

不熟悉自动完成，它不是很漂亮，但您可以使用 jQuery 手动启动 onchange 事件。

你是如何选择项目的？搜索方式还不够……应该是弹开建议列表。用户仍然必须使用箭头键并按回车键。例如。如果源是["ActionScript", "Java", "javascript"] 并且您调用$("#myFilter").autocomplete("search", "Java")，它将弹出包含Java 和JavaScript 的建议列表，但不会选择该项目。

你提到了你我没有参加onchange活动，你参加的是什么活动？你能提供更多关于你想要做什么的细节吗？

希望你看看我的回答。

【参考方案1】：

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

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

或

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

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

【讨论】：

@Hi bigt 有什么办法可以从外部向自动完成列表添加一些值吗？

【参考方案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>

【讨论】：

关于 (3)，AFAIK 这些实际上是两个不同的东西。 jQueryUI不使用 DOM 数据集，而是将所有内容存储为 jQuery 数据属性，这些属性以 jQuery.cache 对象为键。看到这个问题：***.com/questions/5821520/where-is-jquery-data-stored