我正在使用 jQueryUI 自动完成，并且我有一个映射到选择事件的函数，例如：
$("#someId").autocomplete({
source: someData,
select: function (event, ui) { ... },
focus: function (event, ui) { ... }
});
我有一个特殊情况：用户专注于自动完成下拉列表中的一个项目（但未选择它），我需要从不同的函数手动触发选择事件。这可能吗？如果是的话，怎么办？
这对我有用：
$(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:$(this).val()}});
你可以这样做：
$("#someId").trigger("autocompleteselect");
您可以按照 jQuery 团队在单元测试中的方式进行操作 - 请参阅this答案
只需调用以下函数即可
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();
}
1 线解决方案
$('.ui-menu-item .ui-corner-all:contains(\"123")').autocomplete({autoFocus:true}).mouseenter().click()
$('#someId').data('uiAutocomplete')._trigger('select');
如果我们想触发特定的搜索：
$('#search-term').autocomplete('search', 'searching term');
或者只是
$('#search-term').autocomplete('search');
$('#search-term').autocomplete({
...
minLength: 0, // with this setting
...
});
从外面看：
$($('#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 中的应用程序中不起作用
你不必经历一堆繁琐的事情来调用 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);
}
}
}
});
我找到了非常简单的方法来使其发挥作用。 上面的答案对我不起作用。
我的输入定义：
<div class="search_box">
<input type="text" class="inp disabled" id="search-user-id" placeholder="Search by user name or email" />
</div>
自动完成定义：
$('#search-user-id').autocomplete({
minChars: 3,
paramName: 'searchTerm',
deferRequestBy: 200, // This is to avoid js error on fast typing
serviceUrl: '${pageContext.request.contextPath}/settings/reset/psw/query',
type: 'POST',
onSelect : function(suggestion) {
showUserData(suggestion.dto);
},
onSearchError: function (query, jqXHR, textStatus, errorThrown) {
$('.cev-error-fields.reset-password').find('.error_msg').text(errorThrown).show().fadeOut(7000);
}
});
触发它： 我从其他页面中定义的ajax触发， 为了简单起见，我没有将 ajax 放在这里。 在ajax响应中我只是这样触发它：
$('#search-user-id').val(username);
$('#search-user-id').focus();
成功了。
我偶然发现了这个线程，因为我正在寻找一种方法来预填充一堆 jquery ui 自动完成字段，用户可以在其中修改已提交的字段。
首先，我必须加载表单，并使用自动完成功能进行一些输入。
问题 1：我创建了一个 php 函数，能够调用预制的自动完成输入，指定一些内容，例如输入类、id、名称...和值。我还可以传递 JS 自定义函数的名称来触发（以所选项目的 ID 作为参数），具体取决于数据的形式和类型......所以我不能在加载时只是“打印”预填充的输入表单，因为自定义函数（以及内置 select: function( event, 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(要搜索的数据库表：users,课程等..),$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>
抱歉，我是新人，我无法评论 temuri 接受的答案。
我只想补充一点，如果您想查看标签而不是值，您可能还需要在代码中添加它，所以会是
$(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value: 'theValYouWant', label: 'labelShownInTheAutocomplete'}});