jQuery UI 自动完成：清除上一个搜索词答案

【问题标题】：jQuery UI Autocomplete: Clear Previous Search TermjQuery UI 自动完成：清除上一个搜索词
【发布时间】：2012-01-09 21:51:03
【问题描述】：

在 jQuery UI Autocomplete 小部件的 keydown 事件上，默认 case 语句具有以下代码：

default:
    // keypress is triggered before the input value is changed
    clearTimeout( self.searching );
    self.searching = setTimeout(function() {
        // only search if the value has changed
        if ( self.term != self.element.val() ) {
            self.selectedItem = null;
            self.search( null, event );
        }
    }, self.options.delay );
    break;

从我可以看到，如果用户两次键入相同的值，上述代码的第六行将阻止执行。大多数情况下这是有道理的，但在我的情况下，它会导致问题。

我正在构建一个 ajax 应用程序，它有一个固定的标题，顶部有一个搜索输入。用户可以在搜索框中输入任何他们想要的内容，然后会弹出一个 div，其中包含与他们的查询匹配的搜索结果。如果用户输入“abc”并单击结果，它会通过 ajax 加载相应的页面并清除搜索框。问题是，如果他们用户再次输入“abc”，则不会触发搜索方法，因为他们输入的内容与他们上次搜索的内容相匹配。

当用户点击搜索结果时，有没有办法清除存储在小部件中的 self.term 值？或者有没有其他方法可以解决我的问题，而无需编写我自己的自动完成小部件版本？

谢谢

【问题讨论】：

如果有一个事件回调来管理它会很好。这样您就可以自己决定是否以及何时运行搜索。以下解决方案运行良好。

标签： javascript jquery jquery-ui autocomplete

【解决方案1】：

执行以下操作会重置之前的搜索词：

 $('#AutocompleteElementID').data().autocomplete.term = null;

如果您在选择项目时执行以下操作，它将清除先前的搜索词，并在再次键入相同的值时使小部件执行搜索。

【讨论】：

现在是 $('#AutocompleteElementID').data().uiAutocomplete.term = null;
但是，如果您选择在jqueryui.com/autocomplete/#categories 中使用类别（“optgroups”），请注意 uiAutocomplete 将未定义。相反，请使用您在覆盖函数中使用的名称 - 在上述 jquery ui 示例页面中提供的示例中，它是“customCatcomplete”（为覆盖提供的名称，省略点并转换点后名称的第一个字母大写）。
似乎不再起作用了。 $(this).data().term=null; 也没有。这个问题有什么解决办法吗？
@clime 我认为支持的方式是使用 $('#AutocompleteElementID').autocomplete('instance')

【解决方案2】：

很遗憾，

$(this).data().autocomplete.term = null;

不清除输入字段。为此，以下工作：

close: function(event, ui)  {
      // Close event fires when selection options closes
      $('input')[0].value = ""; // Clear the input field 
      }

【讨论】：

【解决方案3】：

如果自动完成功能返回 self，对于您的自动完成元素，您应该能够调用

$yourAutoCompleteElement.term = null;

当你想清除它时。

【讨论】：

我查看了源代码，它看起来不像是在创建函数中返回自我。
它返回你调用自动完成的html元素

【解决方案4】：

            close:          function(event, ui)
                                {
                                // Close event fires when selection options closes

                                $(this).data().autocomplete.term = null; // Clear the cached search term, make every search new
                                },

【讨论】：

关闭事件对我有用。但我只是这个 $('field').val("")

【解决方案5】：

这对我不起作用：

$(this).data().autocomplete.term = null;

但是，这在 jQuery UI - v1.10.2 中对我有用：

$(this).data().term = null;

【讨论】：

【解决方案6】：

你应该试试：

$("#AutocompleteElementID").autocomplete("instance").term = null;

让我知道它是否适合你

【讨论】：

【解决方案7】：

最新版本的 jQuery/jQuery UI 中的 API 发生了变化。

现在访问小部件实例上的属性的正确方法是：

$("#AutocompleteElementID").autocomplete("instance").term = null;

代码示例：http://jsfiddle.net/altano/sdpL17z5/

已验证可使用 jQuery UI 1.11.4 和 jQuery 2.2.3

【讨论】：

【解决方案8】：

清除文本字段后，您可以通过使用空字符串调用 jquery ui 自动完成“搜索”方法来重置先前的搜索。

$('#AutocompleteElementID').autocomplete( "search", "" );

默认情况下，在显示任何项目之前必须满足最小搜索长度，因此它可以有效地清除搜索而不显示所有结果。

http://api.jqueryui.com/autocomplete/#method-search

这应该是处理这种情况的一种稳定方法，因为搜索方法没有随着时间的推移而改变。

【讨论】：

@RajPawanGumdal 有任何反馈吗？