如何从 onchange 事件外部获取 jQuery UI 自动完成值?
Posted
技术标签:
【中文标题】如何从 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以上是关于如何从 onchange 事件外部获取 jQuery UI 自动完成值?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 CKEditor 和 React JS 捕获 OnChange 事件
如何在 JS 函数 onchange 事件中获取 Bootstrap Datepicker 的值?