javascript - typeahead.js : How to remove value when value not in suggestion

Question

我使用 typeahead.js 作为自动完成文本框。

首先，当我输入并从建议中选择一个值时，文本框会正确设置该值。然后，我输入了一个不在建议中的值，然后按 Tab 键，文本框的值不清除。

当输入值不在建议中时，如何清除文本框的值。

Answer 1

我遇到了同样的情况，我解决这个问题的方法是使用 typeahead.js 的事件。我在 typeahead:select 上记录了一个选择，然后在 typeahead:change 上检查是否做出了选择。如果未进行任何选择，我会将输入重置为原始值。

// Initialize typeahead as ususal
var $myTypeahead = $("#my-typeahead");
$myTypeahead.typeahead(/* Set-up typeahead here */);

// Set up variables to store the selection and the original 
// value.
var selected      = null;
var originalVal   = null;

// When the typeahead becomes active reset these values.
$myTypeahead.on("typeahead:active", function(aEvent) {
   selected       = null;
   originalVal    = $myTypeahead.typeahead("val");
})

// When a suggestion gets selected save that
$myTypeahead.on("typeahead:select", function(aEvent, aSuggestion) {
   selected = aSuggestion;
});

// Once user leaves the component and a change was registered
// check whether or not something was selected. If not reset to
// the original value.
$myTypeahead.on("typeahead:change", function(aEvent, aSuggestion) {
   if (!selected) {
      $myTypeahead.typeahead("val", originalVal);
   }

   // Do something with the selected value here as needed...
});