3 个字符后显示的自动完成列表

Question

当用户在文本框中键入时，我正在显示自动完成列表。当 usr 类型然后我调用 AJAX 调用并从服务器获取结果，然后在自动完成中显示。在文本框中输入 2 或 3 个字符后一切正常，将显示自动完成列表。但是，如果我只输入单个字符，则不会显示列表。我跟踪了我的代码，成功调用了 ajax 调用，但未能显示自动完成。 这是我的代码：-

             $('.search_').each(function () {
             var id=this.id;
              $('#'+this.id).unbind("propertychange change keyup paste input").on("propertychange change keyup paste input", function(e){
               if(e.keyCode === 13){
            $('#'+this.id+"_search").click();
            }
            var inputId=$("#"+id+"_val").val(); 
                var gridId=id.substring(0,SecondIndexOf("_",id));
                var url='dtmReader.php';
                var a='{"functioncd":"dataspin","userguid":"'+$('#uid').val()+'","sessguid":"'+$('#sessid').val()+'","transguid":"","tablename":"'+$('#tblName_'+gridId).val()+'", "qufield0":"'+inputId+'","quvalue0":"'+$('#'+this.id).val()+'"}';
                    request = $.ajax({
                      dataType: 'text',
                   type: "POST",
                    url: url,
                     data:{str:a}
                 });
         request.done(function(response, textStatus, jqXHR) {
         var response12=JSON.parse(response.split("{{").join("{"));
            var autoCompleteArray=[];
            for(var i=0;i<response12.length;i++){
            autoCompleteArray.push(response12[i].datavalu);
            }
            console.log(autoCompleteArray);
            $("#"+id).autocomplete({ source: autoCompleteArray,
            select: function (event, ui) { 
            $('#'+this.id+"").val(ui.item.value);
            $('#'+this.id+"_search").click();
            $("#"+this.id+"_searchField").val();
            }});
         });
         request.fail(function(jqXHR, textStatus, errorThrown) {
          //   console.log(textStatus);
         });
                    });
             });     

页面的所有JS和CSS：-

 <!-- Bootstrap core CSS -->
<link href="Scripts/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="Scripts/justified-nav.css" rel="stylesheet">
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>

<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

 <!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
 <!--evol colur picker -->
<link id="jquiCSS" rel="stylesheet" href="Scripts/jquery-ui.css" type="text/css" media="all">

<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="assets/evol.colorpicker.min.css" rel="stylesheet" /> 
<script src="js/evol.colorpicker.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="./assets/jqpagination.css" />  
<link rel='stylesheet' type='text/css' href='assets/colorpicker.css' />
<script src="assets/jquery.uploadify.min.js" type="text/javascript"></script>
<script src="assets/jscolor-1.4.3/jscolor/jscolor.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="assets/uploadify.css">
<!-- <script src="assets/jquery-ui.js"></script>-->
<script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
<link rel='stylesheet' type='text/css' href='assets/style.css' />
 <script type='text/javascript' src='assets/colorpicker.js'></script>
 <script type='text/javascript' src='assets/buttonmaker.js'></script>
<script src="./js/jquery.jqpagination.js"></script>

Answer 1

我假设您使用的是 jQuery UI 自动完成功能，您可以将 minLength 设置为 1。

$("#"+id).autocomplete({ source: autoCompleteArray, minLength: 1, .. });

来自jQuery UI Autocomplete documentation：

minlength：用户在输入之前必须输入的最小字符数 执行搜索。零对于只有少数的本地数据很有用 项目，但单个字符时应使用更高的值 搜索可以匹配几千个项目。