jquery自动完成取消焦点事件答案

【问题标题】：jquery autocomplete canceling focus eventjquery自动完成取消焦点事件
【发布时间】：2016-08-29 00:44:21
【问题描述】：

我有一个自动完成功能，但是当我键入文本进行搜索并将鼠标移到自动完成的结果上时，自动完成中的文本会更改为上一个（删除）。有谁知道如何改善这种行为。

我在 jQuery.com 上阅读过

焦点类型：自动完成焦点

在焦点移动到一个项目（不是选择）之前，ui.item 指的是重点项目。焦点的默认动作是替换文本字段的值与焦点项的值，但仅当焦点事件由键盘交互触发。取消这个事件阻止值被更新，但不阻止菜单项被聚焦。

但我不知道如何取消焦点事件。

【问题讨论】：

标签： jquery jquery-ui jquery-autocomplete

【解决方案1】：

正如您在问题中所述，可以取消 jQuery Autocomplete 上的 focus event。焦点是一个函数，它的第一个参数是一个jQuery Event 对象。根据事件文档：

事件

... 它对目标、relatedTarget、metaKey 和 pageX/Y 属性进行规范化，并提供 stopPropagation() 和 preventDefault() 方法。

然后您可以像这样使用preventDefault() 方法：

$( ".selector" ).autocomplete({
  focus: function( event, ui ) {
    event.preventDefault();
  }
});

【讨论】：

【解决方案2】：

你是对的，jquery autocpmplete 在他们自己的 [demo page][1] 上有这个错误。
如果您输入了一些文本并且自动完成显示了一些答案，则可以得到它；然后您添加一些附加文本，同时您将鼠标悬停在其中一个答案上，程序将剪切您的附加文本。
您可以在自动完成小部件中查看源代码

blur: function (event, ui) {
           // don't set the value of the text field if it's already correct
           // this prevents moving the cursor unnecessarily
           if (self.menu.element.is(":visible") && (self.element.val() !== self.term)){
               self.element.val(self.term);
           }
       }

你可以通过注释掉这行self.element.val(self.term);来找出你的问题但这并不是一个好主意。您可以将错误发布到 jquery！

【讨论】：

【解决方案3】：

jquery-ui 的自动完成小部件默认不会替换鼠标悬停时的输入文本。但是，如果您复制了在http://jqueryui.com/demos/autocomplete/#custom-data 找到的以下代码：

1 $( "#project" ).autocomplete({
2     minLength: 0,
3     source: projects,
4     focus: function( event, ui ) {
5       $( "#project" ).val( ui.item.label );
6       return false;
7     },

这正是你得到的。如果您不想要这种行为，只需从第 4-7 行中删除焦点选项即可。

【讨论】：

它不会替换，它会删除新输入的文本（如果您输入速度足够快而没有暂停）。我没有焦点选项，但我必须添加以防止焦点事件。这个错误可以在这里演示jqueryui.com/demos/autocomplete

【解决方案4】：

通过调用event.preventDefault() 来取消事件（并非所有事件都可以取消，请查看event.cancelable）。 https://developer.mozilla.org/en/DOM/event.preventDefault

【讨论】：

【解决方案5】：

这会将值设置为输入，移除焦点

 $( "#to" ).autocomplete({
    source: availableTags,
    select: function (event, ui) {
    $( "#to" ).val( ui.item.label );
        $('#to').blur();
       return false ;
    }
});

【讨论】：