Question

当用户点击退格键时，将触发搜索。我怎样才能防止这种情况发生？我尝试了以下代码，但它似乎只在第二次按下退格键后才能工作。

var $cached_input = $("#myinput");

$cached_input.autocomplete({
    autoFocus: true,
    delay: 700,
    open: function (event, ui) {
        $(this).autocomplete("widget")
         .find("ui-menu-item-alternate")
          .removeClass("ui-menu-item-alternate")
         .end()
         .find("li.ui-menu-item:odd a")
          .addClass("ui-menu-item-alternate");
    },
    source: function (request, response) {
        var params = { searchTerm: request.term }

        //ajax call made here to load the data...
    },
    minLength: minChars
}).keydown(function (event) {
    if (event.keyCode == 8) {
        $cached_input.autocomplete("disable");
    } else {
        $cached_input.autocomplete("enable");
    }
});

修改作为一种解决方法，我已经实现了以下更改（每个注释旁边的注释），它似乎可以完成这项工作。如果它们存在，仍然可以获得更好的解决方案。

var $cached_input = $("#myinput");
var performSearch = true; //added variable to determine if I should search

$cached_input.autocomplete({
    autoFocus: true,
    delay: 700,
    open: function (event, ui) {
        $(this).autocomplete("widget")
         .find("ui-menu-item-alternate")
          .removeClass("ui-menu-item-alternate")
         .end()
         .find("li.ui-menu-item:odd a")
          .addClass("ui-menu-item-alternate");
    },
    source: function (request, response) {
        if (performSearch) { //check variable before performing search
            var params = { searchTerm: request.term }

            //ajax call made here to load the data...
        }
    },
    minLength: minChars
}).keydown(function (event) {
    if (event.keyCode == 8) {
        performSearch = false; //do not perform the search
    } else {
        performSearch = true; //perform the search
    }
});

Answer 1

试试这段代码

$cached_input.autocomplete({
    autoFocus: true,
    delay: 700,
    open: function (event, ui) {
        $(this).autocomplete("widget")
         .find("ui-menu-item-alternate")
          .removeClass("ui-menu-item-alternate")
         .end()
         .find("li.ui-menu-item:odd a")
          .addClass("ui-menu-item-alternate");
    },
    source: function (request, response) {
        var params = { searchTerm: request.term }

        //ajax call made here to load the data...
    },
    minLength: minChars
}).keyup(function (e) {
            if (e.keyCode === 13) {
                $cached_input.autocomplete("enable");
                $cached_input.autocomplete("search", $cached_input.val());
            }
            else if ((e.keyCode == 8) || (this.value == "") || (e.keyCode == 46)) 
            {
                $cached_input.autocomplete("disable");
            }

Answer 2

我愿意

$(document).on('keyup cut paste change keydown', 'input[data-input_type="autocomplete"]', function (e) {
 $(this).autocomplete({
        source: mySource();
}

通过这种方式，您可以控制在这种情况下将触发自动完成的事件：keyup，cut，paste和keydown。 data-input_type =＆＃34; autocomplete＆＃34;是输入的个人标记，只是说它属于DOM元素的自动完成组，但您可以通过类或您想要的方式调用它。希望这有助于某人。

Answer 3

作为一种解决方法，我实现了以下更改（每个注释旁边的注释），并且似乎可以完成此工作。如果有更好的解决方案，仍然可以接受。

var $cached_input = $("#myinput"); var performSearch = true; //added variable to determine if I should search

$cached_input.autocomplete({
    autoFocus: true,
    delay: 700,
    open: function (event, ui) {
        $(this).autocomplete("widget")
         .find("ui-menu-item-alternate")
          .removeClass("ui-menu-item-alternate")
         .end()
         .find("li.ui-menu-item:odd a")
          .addClass("ui-menu-item-alternate");
    },
    source: function (request, response) {
        if (performSearch) { //check variable before performing search
            var params = { searchTerm: request.term }

            //ajax call made here to load the data...
        }
    },
    minLength: minChars }).keydown(function (event) {
    if (event.keyCode == 8) {
        performSearch = false; //do not perform the search
    } else {
        performSearch = true; //perform the search
    } });

JQuery UI Autocomplete防止退格搜索

3 个答案: