Question

此代码在输入1个字符时显示autosuggest。如何更改autosuggest仅适用于输入3个字符的最小值

<script>
$(document).ready(function(){
    $("#main-keywords").keyup(function(){
        $.ajax({
        type: "POST",
        url: "readkeyword.php",
        data:'keyword='+$(this).val(),
        beforeSend: function(){
            $("main-keywords").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
            $("#suggesstion-box").show();
            $("#suggesstion-box").html(data);
            $("#main-keywords").css("background","#FFF");
        }
        });
    });
});

function selectCountry(val) {
$("#main-keywords").val(val);
$("#suggesstion-box").hide();
}
</script>

Answer 1

计算#main-keywords中.length输入的字符长度，如下所示： -

$(document).ready(function(){
    $("#main-keywords").keyup(function(){
      if($(this).val().length > 2) // add this line
      {
        $.ajax({
        type: "POST",
        url: "readkeyword.php",
        data:'keyword='+$(this).val(),
        beforeSend: function(){
            $("main-keywords").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
            $("#suggesstion-box").show();
            $("#suggesstion-box").html(data);
            $("#main-keywords").css("background","#FFF");
        }
        });
     }
    });
});

Answer 2

检查ajax之前的字符长度：

$(document).ready(function(){

    $("#main-keywords").keyup(function(){
        var len = $(this).length; // get length here

      if(len >= 3) { // if 3 characters entered..proceed
        $.ajax({
        type: "POST",
        url: "readkeyword.php",
        data:'keyword='+$(this).val(),
        beforeSend: function(){
            $("main-keywords").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
            $("#suggesstion-box").show();
            $("#suggesstion-box").html(data);
            $("#main-keywords").css("background","#FFF");
        }
        });
      }
    });

});

Answer 3

我知道你已经得到了答案，我正在为未来的读者写这篇文章，并为你做优化。

在您的代码中，您正在做的是为您在文本框中键入或删除的每个字符发出AJAX请求。这是一种不好的做法，因为您将一次制作太多的异步服务器请求。这可能会导致服务器负载过重。

您需要做的是仅在用户在写入文本框后暂停一段时间后才提出服务器请求。

你可以使用https://jqueryui.com/autocomplete/#remote，他们已经很好地处理了这个问题。

对于JSON数据类型：https://jqueryui.com/autocomplete/#remote-jsonp

仅在输入3个字符时自动建议

3 个答案: