【问题标题】:jquery-ui autocomplete does not select on enterjquery-ui 自动完成在输入时不选择
【发布时间】:2011-03-22 09:49:17
【问题描述】:

我已经使用 jquery-ui 来自动完成输入框并设置所选项目的隐藏值。

这是我使用的

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

选项(现在可能错了,手头没有代码,但直到我的问题才有效......)

当用鼠标从菜单中选择一个项目时它可以工作,但是如果我只是输入一些文本并使用 Enter 选择一个项目 - 它什么也不做,就好像自动完成根本没有运行选择一样功能。但是,开箱即用的选项卡会触发选择。

我已经使用了焦点和更改:也更新了我想要的字段,但我认为这太过分了,如果真的有必要指定所有焦点,更改和选择,只是为了确保用户选择列表中的一个项目,它实际上会被选中。

谢谢。

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);
}
});

所以,问题是,当用户用鼠标从菜单中选择并且在字段中跳出时(keyUp,keyDown 选择然后跳出,有效)但是 keyUp,keyDown 选择它,然后进入,什么也没有发生!

【问题讨论】:

  • 如果你设置了一个隐藏的输入,它有一个奇怪的 id myDiv.... 也许change: function(event, ui) { ...$("#myDiv").val(ui.item.value)... } 有效

标签: jquery jquery-ui autocomplete jquery-ui-autocomplete


【解决方案1】:

一个类似的例子适用于我的 jQuery 1.4.2 和 jQuery-ui 1.8.7。需要注意的是,Enter 仅在从列表中选择项目时才起作用。如果您正在创建一个不存在的新条目,则按 Enter 不会触发选择或更改事件。我必须绑定一个单独的事件处理程序才能使这种情况发生。

【讨论】:

  • 这是我用来捕获 Enter 键的确切代码。 $("#yourAutoComplete").keypress(function (e) { if (e.which == 13) { yourFunction($('#yourAutoComplete').val()); return false; } } 希望有帮助!
  • 看看@iamct 的回答!自动对焦使第一个项目具有焦点,因此输入键选择它!
【解决方案2】:

这对我有用,我在自动完成后提交表单。

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

Search on Click with Jquery's Autocomplete

【讨论】:

    【解决方案3】:

    有这个参数吗?设置
    自动对焦:真

    在此处查看答案:https://stackoverflow.com/a/9243511/74585

    【讨论】:

    • 这正是我想要的,可惜这不是公认的答案!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-29
    • 2011-07-31
    相关资源
    最近更新 更多