I am showing autoplete list when a user type in text box. When usr type then i call AJAX call and get results from server, Then show then in autoplete. Everything is working fine after entering 2 or 3 character in text box, Autoplete list will be shown. But if i enter only single character then list is not showing. I traced my code and ajax call is sucessfully called, But failed to show autoplete. Here is my code:-

             $('.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).autoplete({ 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);
         });
                    });
             });     

All JS and CSS of page:-

 <!-- 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>

I am showing autoplete list when a user type in text box. When usr type then i call AJAX call and get results from server, Then show then in autoplete. Everything is working fine after entering 2 or 3 character in text box, Autoplete list will be shown. But if i enter only single character then list is not showing. I traced my code and ajax call is sucessfully called, But failed to show autoplete. Here is my code:-

             $('.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).autoplete({ 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);
         });
                    });
             });     

All JS and CSS of page:-

 <!-- 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>

• javascript
• jquery
• ajax
• autoplete

• Is it jQuery UI autoplete that you are using here? or is it any other plugin? – Pramod Karandikar Commented Jan 22, 2015 at 5:39
• Yes, Its JQuery UI auto-plete. I added All js and CSS of my page here. – namneet singh Commented Jan 22, 2015 at 5:44
• are any limits set in server code? There really isn't enough troubleshooting information given for anyone to really help with. Inspect the requests themselves in browser console and see exactly what is returned and that it is what you expect – charlietfl Commented Jan 22, 2015 at 5:49
• No, After entering single character i am getting results from server in this line console.log(autoCompleteArray) , But not able to see that results in jquery autoplete – namneet singh Commented Jan 22, 2015 at 5:51
• set breakpoints in your code then and step through it. Hard to troubleshoot without demo that replicates problem – charlietfl Commented Jan 22, 2015 at 5:54

1 Answer 1

I assume that you are using jQuery UI autoplete, you can set minLength to 1.

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

From jQuery UI Autoplete documentation:

minlength: The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.