JQuery自动完成：如何强制从列表中选择（键盘）

我正在使用JQuery UI自动完成。一切都按预期工作，但是当我用键盘上的向上/向下键循环时，我注意到文本框中充满了列表中的项目，但是当我到达列表的末尾并再次按下向下箭头时时间，我输入的原始术语显示出来，它基本上允许用户提交该条目。JQuery自动完成：如何强制从列表中选择（键盘）

我的问题：是否有简单的方法来限制选择到列表中的项目，并从键盘选择中删除输入中的文本？例如：如果我有一个包含{'Apples (AA)', 'Oranges (AAA)', 'Carrots (A)'}的列表，如果用户键入'app'，我将自动选择列表中的第一个项目（'苹果（AA）'），但如果用户按下箭头，'app'再次出现在文本框中。我怎样才能防止呢？

谢谢。

来源

2012-07-27 Ali B

每次加载列表它会激发事件。检查是否只有一个元素，然后触发一个'click'事件或选择项目 – Imdad 2012-07-27 04:08:25

我总是选择第一个项目，但如果我使用键盘循环显示列表，它将显示文本框中的文本当我到达列表的末尾时。这就是我想要阻止的;基本上，我希望它回到列表的顶部。 – 2012-07-27 04:28:25

'focus：function（event，ui）{return false; return false; }' – Imdad 2012-07-27 04:31:05

"Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused."

reference

焦点事件：

focus: function(e, ui) { 
    return false; 
}

来源

2012-07-27 04:31:10

谢谢。这可以防止键盘导航填充文本框，这完全绕过了问题。 – 2012-07-27 04:47:07

@AliB不客气:) – 2012-07-27 04:47:50

好了，在插入它之后，它解决了部分问题：当我用箭头键滚动时，文本框不再被填充，但我仍然能够返回因为向下键有一个“额外”插槽，将焦点从列表中移出。我需要它专门留在列表中。有任何想法吗？ – 2012-07-27 05:05:49

为动力的选择，你可以使用自动完成

的 "change" event

 var availableTags = [ 
      "ActionScript", 
      "AppleScript" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags, 
      change: function (event, ui) { 
       if(!ui.item){ 
        //http://api.jqueryui.com/autocomplete/#event-change - 
        // The item selected from the menu, if any. Otherwise the property is null 
        //so clear the item for force selection 
        $("#tags").val(""); 
       } 

      } 

     });

来源

2012-12-17 15:36:20 Saurabh

工作得很好 – thepk 2013-06-07 15:27:07

这个解决方案的问题是，如果有人在字段中键入非法值，然后命中输入，表单将提交非法值。仍试图找到一个优雅的解决方案。 – gitb 2014-04-30 20:06:12

一个可能的解决方案是从表单中移除'type =“submit”'，并使用jQuery来处理提交按钮上的点击事件。最后，服务器端验证是您唯一真正信任的东西。 – Sky 2017-01-22 17:13:11

无论在梳子这些其他的答案工作得很好。

另外，您可以使用event.target来清除文本。这有助于在向多个控件添加自动完成功能或不想在选择器中输入两次时出现（可维护性问题）。

$(".category").autocomplete({ 
    source: availableTags, 
    change: function (event, ui) { 
     if(!ui.item){ 
      $(event.target).val(""); 
     } 
    }, 
    focus: function (event, ui) { 
     return false; 
    } 
});

应该指出，然而，在即使“焦点”返回false，上/下键仍然会选择该值。取消此事件仅取消文本的替换。所以，“j”，“down”，“tab”仍然会选择与“j”匹配的第一个项目。它不会在控制中显示它。

来源

2013-07-11 19:10:57 Richard

工作很好。谢谢！ – ajbraus 2014-08-07 17:06:22

这大部分工作。我正在使用ajax源代码，并且如果用户在加载选项之前点击选项卡，则更改不会清除结果。 – danielson317 2016-11-09 16:50:32

定义一个变量

var inFocus = false;

以下事件添加到您的输入

.on('focus', function() { 
    inFocus = true; 
}) 
.on('blur', function() { 
    inFocus = false; 
})

而一个keydown事件附加到窗口

$(window) 
    .keydown(function(e){ 
     if(e.keyCode == 13 && inFocus) { 
      e.preventDefault(); 
     } 
    });

来源

2014-06-24 13:12:57 callumander

JQuery自动完成：如何强制从列表中选择（键盘）

回答

相关问题