jQuery UI自动完成:清除以前的搜索项

jQuery UI Autocomplete: Clear Previous Search Term

本文关键字：搜索 清除 UI jQuery      更新时间：2023-09-26

在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'，则不会触发搜索方法，因为他们输入的内容与他们上次搜索的内容匹配。

有没有清除自我的方法?当用户单击搜索结果时，在小部件中存储的词值?或者是否有其他方法可以解决我的问题，而不必制作我自己版本的自动完成小部件?

谢谢

执行以下操作将重置先前的搜索项:

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

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

不幸的是，

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

不清除输入字段。要做到这一点，下面的工作:

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

如果自动补全函数返回self，那么对于自动补全元素，您应该能够调用

$yourAutoCompleteElement.term = null;


            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
                                },

这对我不起作用:

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

然而，这确实为我工作在jQuery UI - v1.10.2:

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

你应该试试:

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

让我知道它是否适合你

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

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

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

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

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

清除文本字段后，您可以通过调用jquery ui autocomplete "search"方法使用一个空字符串来重置先前的搜索。

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

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

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

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

相关文章：