jQuery-UI自动完成功能无法在按下回车键后进行选择

Question

我使用了jquery-ui来自动完成输入框，并从所选项中设置隐藏值。

这是我使用的方式：

 select: function(event, ui) { ...$("#myDiv").val(ui.item.value)... } 

选项（现在可能有误，手头没有代码，但它在我的问题之前是有效的...）

当我用鼠标从菜单中选择项目时，它可以正常工作，但是如果我只输入一些文本并使用Enter选择一个项目，则不起作用，就好像自动完成函数根本没有运行选择。然而，从框中切换出来时会触发选择。

我已经使用了focus和change来更新我想要的字段，但我认为这有点过度，难道必须指定所有的focus、change和select才能确保无论用户如何从列表中选择项目都会被选中吗？

谢谢。

rofly: 我正在使用jQuery-UI自动完成，它有你提供的代码，但看起来像这样（来自jquery.ui.autocomplete.js）

case keyCode.ENTER:
                case keyCode.NUMPAD_ENTER:
                    // when menu is open or has focus
                    if ( self.menu.active ) {
                        event.preventDefault();
                    }
                    //passthrough - ENTER and TAB both select the current element
                case keyCode.TAB:
                    if ( !self.menu.active ) {
                        return;
                    }
                    self.menu.select( event );
                    break;

那看起来都很好，所以我不确定它是否因为这个失败。

我的代码是这样的（包装在document.read()中）

$("#someDiv").attr("autocomplete", 'off');
$("#someDiv").autocomplete({
source: function(request, response) {
if ( request.term in cache ) {
response( cache[ request.term ] );
return;
}
$.ajax({
url: "giveMeJSON.jsp",
dataType: "json",
data: request,
success: function( data ) {
cache[ request.term ] = data;
response( data );
}
})},
minLength: 1,
delay: 300,
select: function(event, ui) {
$("#someDiv").val(ui.item.label);
$("#hiddenDiv").val(ui.item.value);
}
});

所以问题是，当用户使用鼠标从菜单中进行选择时或通过按下Tab键离开字段时（使用keyUp，keyDown选择后再Tab离开），代码可以正常运行。但如果选择了某个选项之后，使用keyUp、keyDown选择相应的选项，然后按Enter键，却没有任何反应。

- rapadura

---

如果您设置了一个隐藏输入框，它会有一个奇怪的ID myDiv...也许 change: function(event, ui) { ...$("#myDiv").val(ui.item.value)... } 可以起作用。 - Ties

Answer 1

对我来说，使用jQuery 1.4.2和jQuery-ui 1.8.7的类似实例可以正常工作。但需要注意的是，只有在从列表中选择项目时，"Enter"键才会起作用。如果您正在创建一个不存在的新条目，则按下"Enter"键不会触发选择或更改事件。我不得不绑定一个单独的事件处理程序来解决这种情况。

- JeffSea

---

以下是我正在使用的捕获回车键的准确代码。 $("#yourAutoComplete").keypress(function (e) { if (e.which == 13) { yourFunction($('#yourAutoComplete').val()); return false; } }) 希望能有所帮助！ - JeffSea

看看@iamct的回答！自动对焦使第一个项目获得焦点，因此按Enter键会选择它！ - joonas.fi

Answer 2

这对我很有帮助，因为我在自动完成后提交表单时使用了它。

    $("input#searchbox").autocomplete({
  source: autocomplete,
  select: function(event, ui) {  }
    $("input#searchbox").val(ui.item.value);
    $("#searchform").submit();
  }
})

来自使用JQuery的自动完成搜索

- Anish

Answer 3

有这个参数吗？设置
自动对焦：是

在此处查看答案：https://dev59.com/Pmox5IYBdhLWcg3wYzUt#9243511

- iamct

---

这正是我正在寻找的，可惜这不是被接受的答案！ - joonas.fi