我正在使用jQueryUI自动完成功能，我已经将一个函数映射到选择事件上了，例如：
$("#someId").autocomplete({
source: someData,
select: function (event, ui) { ... },
focus: function (event, ui) { ... }
});
我有一个特殊情况：用户已经在自动完成下拉框中选定了一个项目（但未选择它），我需要从另一个函数手动触发选择事件。这可能吗？如果可以，怎么做？
如何在jQueryUI中手动触发自动完成“选择”事件？
35
- Sky
12个回答
43
以下是对我有效的方法：
$(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:$(this).val()}});
- temuri
8
10
您可以这样做：
$("#someId").trigger("autocompleteselect");
- Nicola Peluchetti
2
7这将只有在使用 "$().on('autocompleteselect')" 来绑定事件时才能起作用，而不是在构造函数中使用 "$().autocomplete({select:function() {}})" 进行绑定。可以使用 "$().data('autocomplete')._trigger()"。 - HenningCash
你能详细解释一下如何在选择框中选择一个选项吗？ - Developerium
6
只需调用以下函数:
setAutocomplete("#txt_User_Name","rohit");
function setAutocomplete(autocompleteId,valuetoset)
{
$(autocompleteId).val(valuetoset);
$(autocompleteId).autocomplete("search", valuetoset);
var list = $(autocompleteId).autocomplete("widget");
$(list[0].children[0]).click();
}
- Rohit More
1
我不得不添加一个超时时间，因为我的搜索没有及时完成（这是一个ajax调用）。 - Matt Kemp
3
如果我们想要触发特定内容的搜索：
或者只是
$('#search-term').autocomplete('search', 'searching term');
或者只是
$('#search-term').autocomplete('search');
$('#search-term').autocomplete({
...
minLength: 0, // with this setting
...
});
- Alliswell
3
$('#someId').data('uiAutocomplete')._trigger('select');
- kayz1
1
我之前卡在这里了，非常感谢，我用它来触发更改，就像这样$('#someId').data('uiAutocomplete')._trigger('change'); - NinaNa
3
一行代码解决方案
$('.ui-menu-item .ui-corner-all:contains(\"123")').autocomplete({autoFocus:true}).mouseenter().click()
- cegprakash
1
1使用
.mouseenter().click()帮助我正确从结果中选择了一个项目。 - Luksurious1
来自外部：
$($('#someId').data('autocomplete').menu.active).find('a').trigger('click');
一个示例，如何在“打开”自动完成事件内部设置按下水平箭头键时触发选择：
$('#someId').autocomplete({
open: function(event, ui) {
$(this).keydown(function(e){
/* horizontal keys */
if (e.keyCode == 37 || e.keyCode == 39) {
$($(this).data('autocomplete').menu.active).find('a').trigger('click');
}
});
}
});
很不幸，我在 Chromium 140.0.835.200 上尝试了这种被标记为“成功”的解决方法，但并没有奏效。
- palmic
1
你不需要经历一大堆繁琐的步骤才能调用select。这是我从自己扩展的自动完成版本中调用select的方法。
$(this).data('ui-autocomplete').options.select(event, ui);
这个我在哪里使用
/**
* The jQuery UI plugin autocomplete
*/
$.widget( "ui.autocomplete", $.ui.autocomplete, {
options: {
close: function( event, ui ) {
if (typeof event.currentTarget == 'undefined') {
$(this).val("");
$(this).data('ui-autocomplete').options.select(event, ui);
}
}
}
});
- user7793758
0
我在寻找一种方法来预填一些jQuery UI自动完成字段的表单，让用户能够修改已经提交的。
首先，我必须加载表单，使用自动完成的某些输入。
问题1：我创建了一个PHP函数，能够调用预制的自动完成输入，指定一些事情，如输入类、ID、名称……和值。我还可以传递JS自定义函数的名称来触发（带有选定项的ID作为参数），具体取决于表单和数据类型…所以当加载表单时，我不能只“打印”预填充的输入，因为自定义函数（和内置的select: function（事件，ui）{…}中指定的其他操作）不会触发。我真的需要模仿搜索 -> 点击操作。
问题2：源来自执行从输入中输入的字符串进行搜索的ajax调用。然后显示字符串作为项目……但我想让实际输入成为那些来源的ID。为此，select：事件创建一个带有所点击项目的ID的隐藏输入，并检查它是否已被选择（我可以从一个自动完成输入中选择多个元素..），等等。它必须被触发。
我真的需要模仿搜索 -> 点击操作。
问题3：由于源自ajax调用，我必须进行所有这些调用来预填表单，这是一种非常糟糕的填充表单的方式（出于各种原因）。 我无法真正模拟搜索->点击操作。解决方案： 我为每个“真实输入框”创建了第二个（隐藏的）自动完成输入框，对于这些输入框，初始化$(id).autocomplete(...)执行相同的操作（在选择时），但使用直接从数据库中提取的静态源填充。然后，我只需在这个虚拟输入框中模拟搜索->点击，它会使用我想要保存的ID绘制好的输入框...
foreach (values to prefill..) {
$("#'.$mot_cle.'_input_autocomplete_prefill").val("'.$valeur_finale_unique['value'].'");
$("#'.$mot_cle.'_input_autocomplete_prefill").autocomplete("search", "'.$valeur_finale_unique['value'].'");
var list = $("#'.$mot_cle.'_input_autocomplete_prefill").autocomplete("widget");
$(list[0].children[0]).click();
}
这有点复杂。但最终，每当我想在页面中显示自动完成输入时，我只需要调用包装它的 PHP 函数 ;) 而且它非常快速，并且不会干扰整个表单管理的输入 ID\名称...
后端有很多事情要处理，但最终，当我输入这个时，它看起来像这样：
<div class="marge">
<span class="texte_gras">Demandeur(s)</span><br>
'.formulaire_autocomplete("demandeurs","pdrh_formulaire_ajouter_cible_valeurs","1","usager",$valeur_demandeur,"").'
</div>
PHP函数formulaire_autocomplete($keyword（用于输入名称），$class（用于在提交表单时使用jquery序列化），$multi（可以输入多个选择项），$type（要搜索的数据库表：用户，课程等），$value（如果是已提交的表单，则为预填充表单中此输入的ID），$function（如果我想在选择时触发自定义JS函数：））
我得到了这个：
<div class="marge">
<span class="texte_gras">Demandeur(s)</span><br>
<input style="width: 90%;" class="pdrh_formulaire_ajouter_cible_valeurs ui-autocomplete-input" type="text" name="demandeurs[]" id="demandeurs_input_autocomplete" value="" autocomplete="off"> <input style="width: 90%; display: none;" class="pdrh_formulaire_ajouter_cible_valeurs ui-autocomplete-input" type="text" name="demandeurs_prefill[]" id="demandeurs_input_autocomplete_prefill" value="" autocomplete="off"> <div id="demandeurs_boite_autocomplete_selection" style="width: 100%;"><div style="width: 100%;" id="demandeurs_auto_ID_25434"><div class="petite_marge"><input style="width: 80%;" class="pdrh_formulaire_ajouter_cible_valeurs" type="hidden" name="demandeurs_auto_ID[]" id="demandeurs_input_autocomplete_auto_id_25434" value="25434"><span class="petit_texte texte_gras">STEPHANIE (41263)</span><div class="bouton_transparent" onclick="effacer_div('demandeurs_auto_ID_25434')"><div class="petite_marge"><img src="./images/vide.png" style="width: 1em;"><img src="./images/effacer.png" style="width: 1em;"></div></div></div></div><div style="width: 100%;" id="demandeurs_auto_ID_18760"><div class="petite_marge"><input style="width: 80%;" class="pdrh_formulaire_ajouter_cible_valeurs" type="hidden" name="demandeurs_auto_ID[]" id="demandeurs_input_autocomplete_auto_id_18760" value="18760"><span class="petit_texte texte_gras">MARIE (23673)</span><div class="bouton_transparent" onclick="effacer_div('demandeurs_auto_ID_18760')"><div class="petite_marge"><img src="./images/vide.png" style="width: 1em;"><img src="./images/effacer.png" style="width: 1em;"></div></div></div></div></div><script>
$("#demandeurs_input_autocomplete").autocomplete({
source: function (request, response) {
requete_ajax = $.ajax({
type: "POST",
url: 'fonctions.php',
data: 'recherche_autocomplete=usager&chaine='+request.term,
dataType: 'json',
success: function(data) {
ajax_en_cours = 0; console.log("Ajax terminé");
// var resultat = JSON.parse(data.choix);
var tableau_resultat = Object.values(data.choix);
response(tableau_resultat);
console.log(tableau_resultat);
},
error: function(e) {
ajax_en_cours = 0; console.log("Ajax terminé");
console.log('Erreur | demandeurs recherche autocomplete');
}
});
},
minLength: 3,
select: function( event, ui ) {
$("#demandeurs_input_autocomplete_auto_id").val(ui.item.ID);
var contenu_selection = $("#demandeurs_boite_autocomplete_selection").html();
$("#demandeurs_boite_autocomplete_selection").html(contenu_selection+"<div style=\"width: 100%;\" id=\"demandeurs_auto_ID_"+ui.item.ID+"\"><div class=\"petite_marge\"><input style=\"width: 80%;\" class=\"pdrh_formulaire_ajouter_cible_valeurs\" type=\"hidden\" name=\"demandeurs_auto_ID[]\" id=\"demandeurs_input_autocomplete_auto_id_"+ui.item.ID+"\" value=\""+ui.item.ID+"\"><span class=\"petit_texte texte_gras\">"+ui.item.value+"</span><div class=\"bouton_transparent\" onclick=\"effacer_div('demandeurs_auto_ID_"+ui.item.ID+"')\"><div class=\"petite_marge\"><img src=\"./images/vide.png\" style=\"width: 1em;\"><img src=\"./images/effacer.png\" style=\"width: 1em;\"></div></div></div></div>");
$("#demandeurs_input_autocomplete").val(" ");
}
});
var valeurs_prefill = [{value: "STEPHANIE (41263)", ID: "25434"},{value: "MARIE (23673)", ID: "18760"}];
$("#demandeurs_input_autocomplete_prefill").autocomplete({
source: valeurs_prefill,
minLength: 3,
select: function( event, ui ) {
$("#demandeurs_input_autocomplete_auto_id").val(ui.item.ID);
var contenu_selection = $("#demandeurs_boite_autocomplete_selection").html();
$("#demandeurs_boite_autocomplete_selection").html(contenu_selection+"<div style=\"width: 100%;\" id=\"demandeurs_auto_ID_"+ui.item.ID+"\"><div class=\"petite_marge\"><input style=\"width: 80%;\" class=\"pdrh_formulaire_ajouter_cible_valeurs\" type=\"hidden\" name=\"demandeurs_auto_ID[]\" id=\"demandeurs_input_autocomplete_auto_id_"+ui.item.ID+"\" value=\""+ui.item.ID+"\"><span class=\"petit_texte texte_gras\">"+ui.item.value+"</span><div class=\"bouton_transparent\" onclick=\"effacer_div('demandeurs_auto_ID_"+ui.item.ID+"')\"><div class=\"petite_marge\"><img src=\"./images/vide.png\" style=\"width: 1em;\"><img src=\"./images/effacer.png\" style=\"width: 1em;\"></div></div></div></div>");
$("#demandeurs_input_autocomplete").val(" ");
}
});
$("#demandeurs_input_autocomplete_prefill").val("STEPHANIE (41263)");
$("#demandeurs_input_autocomplete_prefill").autocomplete("search", "STEPHANIE (41263)");
var list = $("#demandeurs_input_autocomplete_prefill").autocomplete("widget");
$(list[0].children[0]).click();
$("#demandeurs_input_autocomplete_prefill").val("MARIE (23673)");
$("#demandeurs_input_autocomplete_prefill").autocomplete("search", "MARIE (23673)");
var list = $("#demandeurs_input_autocomplete_prefill").autocomplete("widget");
$(list[0].children[0]).click();
</script>
</div>
- MMB
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
$(this).data('autocomplete')._trigger('select', 'autocompleteselect', {item:{value:$(this).val()}});。 - Ian Warburton