如何触发自动完成“选择”在 jQueryUI 中手动事件？
我正在使用 jQueryUI 自动完成，并且我有一个映射到选择事件的函数，例如：
$("#someId").autocomplete({
source: someData,
select: function (event, ui) { ... },
focus: function (event, ui) { ... }
});
我有一个特殊情况：用户专注于自动完成下拉列表中的一个项目（但未选择它），我需要触发从不同的功能手动选择事件。这可能吗？如果是这样，怎么办？
I'm using jQueryUI autocomplete, and I have a function mapped to the select event, e.g.:
$("#someId").autocomplete({
source: someData,
select: function (event, ui) { ... },
focus: function (event, ui) { ... }
});
I have a special case: The user has focused on an item in the autocomplete drop-down (but not selected it) and I need to trigger the select event manually from a different function. Is this possible? If so, how?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（12）
这对我有用：
Here's what worked for me:
你可以这样做：
You could do:
您可以按照 jQuery 团队在单元测试中的方式进行操作 - 请参阅这个答案
You can do it the way the jQuery team does it in their unit tests - see this answer
只需调用以下函数
setAutocomplete("#txt_User_Name","rohit");Simply call following function
setAutocomplete("#txt_User_Name","rohit");1线解决方案
1 line solution
如果我们想触发特定的搜索：
或者只是
If we want to trigger search of something particularly:
or just
从外部：
如何在“打开”自动完成事件内部按下水平箭头键时设置选择触发的示例：
不幸的是，如何解决标记为“成功”的问题的好方法在我的 Chromium 140.0.835.200 中的应用程序中不起作用
From outside:
An example how to setup select triggering at pressing of horizontal arrows keys from inside of "open" autocomplete event:
Unfortunately that nice way how to solve this marked as "success" did not work at my app in chromium 140.0.835.200
您不必通过一堆繁琐的内容来调用 select。这就是我从我自己的自动完成扩展版本中调用 select 的方式。
我在哪里使用这个
You don't have to go through a bunch of rigmarole to call select. This is how I call select from my own extended version of autocomplete.
where I use this
我找到了非常简单的方法来使其发挥作用。
上面的答案对我不起作用。
我的输入定义：
自动完成定义：
触发它：
我从其他页面中定义的ajax触发，
为了简单起见，我没有将 ajax 放在这里。
在 ajax 响应中，我只是这样触发它：
它有效。
I found very simple way to make it work.
Answers above did not work for me.
My input definition:
The autocomplete definition:
Trigger it:
I am triggering from an ajax defined in other page,
I do not put the ajax here for simplicity.
Inside the ajax response I just trigger it this way:
It worked.
我偶然发现了这个线程，因为我正在寻找一种方法来预填充一堆 jquery ui 自动完成字段，用户可以在其中修改已经提交的字段。
首先，我必须加载表单，并使用自动完成功能进行一些输入。
问题 1：我创建了一个 php 函数，能够调用预制的自动完成输入，指定一些内容，例如输入类、id、名称...和值。我还可以传递 JS 自定义函数的名称来触发（以所选项目的 ID 作为参数），具体取决于数据的形式和类型......所以我不能在加载时只是“打印”预填充的输入表单，因为自定义函数（以及内置 select: function( event, ui ) { ... } 中指定的其他操作不会触发。
我真的需要模仿搜索->点击操作。
问题 2：源来自 ajax 调用，根据输入中输入的字符串执行搜索。然后它将字符串显示为项目...但我希望真正的输入是这些源的 ID。为此， select: 事件会创建一个隐藏输入，其中包含所单击项目的 ID，检查它是否已被选择（我可以从一个自动完成输入中选择多个元素..），等等。它必须被触发。
我真的需要模仿搜索->点击操作。
问题 3：由于源来自 ajax 调用，我必须进行所有这些调用来预填充表单，这是一种非常糟糕的填充表单的方法（出于各种原因）。
我无法真正模仿搜索->单击操作。
解决方案
我只是为每个“真实的”创建了第二个（隐藏的）自动完成输入，其中初始化 $(id).autocomplete(...) 执行相同的操作（选择时），但填充了我直接绘制的静态源来自已保存输入的数据库。然后，我只是模仿搜索 - >单击这个虚拟输入，它会使用我想要保存的 ID 绘制好的输入......
这非常复杂。但最后，每次我想在页面中显示自动完成输入时，我只需要调用将其包装起来的 php 函数；）
而且速度快如闪电，并且不会弄乱整个表单管理的输入 ID\名称...
后端发生了很多事情，但最终，当我输入以下内容时，它看起来像这样：
PHP函数formaire_autocomplete($keyword(用于输入名称),$class(用于提交表单时jquery序列化),$multi(可以输入多个选择),$type(要搜索哪个数据库表：用户，课程，等等..),$value(预填写此输入表单的ID，如果它是已提交的表单)，$function(如果我想在选择时触发自定义JS函数:))
我得到这 ：
I stumbled upon this thread as I was seeking a way to prefill a bunch of jquery ui autocomplete fields in a form where users can modify an already submitted one.
First, I have to load the form, with some inputs using autocomplete.
Problem 1 : I created a php function able to call a premade autocomplete input, specifying some things like the input class, id, name... and value(s). I can also pass the name of a JS custom function to trigger (with the selected item's ID as a parameter), depending on the form and type of data... So I can't just "print" the prefilled input when loading the form because the custom function (and other actions specified in the built-in select: function( event, ui ) { ... } won't fire.
I really need to mimic a search-->click action.
Problem 2 : the source comes from an ajax call performing a search from the string entered in the input. It then shows strings as items... but I want the real input to be the IDs of those sources. To do so, the select: event creates a hidden input with the ID of the clicked item, checks if it was already selected (I can select multiple elements from one autocomplete input..), etc. It has to be triggered.
I really need to mimic a search-->click action.
Problem 3 : Since the source comes from an ajax call, I would have to make all these calls to prefill the form, which is a very bad way of populating a form (for various reasons).
I can't really mimic the search-->click action.
Solution
I simply created a second (hidden) autocomplete input for each "real ones", for which the initialisation $(id).autocomplete(...) performs the same actions (upon select), but is populated with static source i drew directly from the DB with the already saved input. Then, I simply mimic the search-->click in this dummy input, which draws the good inputs with the IDs I want to save...
It's quite complicated. But in the end, everytime I want to show an autocomplete input in my pages, I only have to call the php function which wraps it up ;)
And it's lightning fast, and don't mess with the input IDs\Names for the entire forms managing...
There is a lot going on backend, but in the end, it looks like this, when I enter this :
PHP function formulaire_autocomplete($keyword(used for input name),$class(used for jquery serialize when submitting form),$multi(possibility to input more than one choice),$type(which DB table to search: users, courses, etc..),$value(IDs to prefill in the form for this input, if it is an already submitted form), $function(if I want to trigger a custom JS function when select:))
I get this :
要添加到 temuri 的答案，如果您想查看标签而不是值，您可能还需要添加它在代码中：
To add to temuri's answer, if you want to see the label and not the value, you probably need to add it as well in the code: