jquery-ui 自动完成在输入时不选择

发布于 2024-09-12 08:49:13 字数 1730 浏览 1 评论 0原文

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

我使用该选项执行了此

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

操作（现在可能是错误的，手头没有代码，但它直到我的问题为止都有效......）

当用鼠标从菜单中选择一个项目时，它会起作用，但是如果我只是输入一些文本并用 Enter 选择一个项目 - 它不会执行任何操作，就好像自动完成功能根本不运行选择一样。但是，按 Tab 键跳出框会触发选择。

我已经使用了焦点和更改：也更新了我想要的字段，但我认为这太过分了，是否真的有必要指定所有焦点、更改和选择，只是为了确保用户从其中选择一个项目实际将被选择的列表。

谢谢。

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选择iteme，然后回车，什么也没有发生！

原文

I have used the jquery-ui to autocomplete an input box and set a hidden value from the selected item.

This I did using the

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

option (might be wrong now, don't have the code at hand, but it works up until my question...)

It works when select an item from the menu with the mouse, however if I just enter some text and choose an item with Enter - it does not do anything, it is as if the select is not run at all by the autocomplete function. However, tabbing out of the box triggers the select.

I have used a focus and change: to also update the fields I want, but I think this is overkill, should it really be necessary to specify all of focus, change and select, just to be sure that however a user selects an item from the list it will actually be selected.

Thank you.

rofly: I am using the jquery-ui autocomplete, it has the code you give, but it looks like this (from the 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;

That looks all dandy, so Im not sure if it fails because of this.

My code is like this (wrapped in 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);
}
});

so, the problem is, this works when the user is selecting from the menu with the mouse AND when tabbing out of the field (keyUp,keyDown to choose then tab out, works) but keyUp,keyDown to choose itme, then enter, and nothing happens!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南…巷孤猫 2024-09-19 08:49:13

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

回复收藏 0 原文

故事与诗 2024-09-19 08:49:13

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

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

从
使用 Jquery 的自动完成功能进行点击搜索

This worked for me where I was submitting a form after auto completing.

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

From
Search on Click with Jquery's Autocomplete

回复收藏 0 原文