Question

How is ti possible that the code below show the array ONLY if the text is empty… It should show the list during the typing NOT when the text is empty.

STEPS:

1. Focus on text
2. type a text, like ‘abc’ (this text returns an array doing the ajax call)
3. nothing happen

4. delete ‘abc’ and i see the array correctly.

   $('#titolare').keyup(function(){
     var titolare = $.trim($('#titolare').val());
   
     $.ajax({
       type: "POST",
       url: "page.php",
       data: { titolare: titolare },
       success: function(msg){          
         var obj = jQuery.parseJSON(msg);
   
         if (obj.result){
           var tit   = obj.titolare
             , tit_a = [];            
   
           $.each (tit, function (a) {              
             tit_a[a] = { titolare: tit[a].titolare, cod_fis: tit[a].cod_fis };
           });         
   
               $("#titolare").autocomplete({
             minLength: 0,         
             source: tit_a,
                   focus: function( event, ui ) {             
                       $("#titolare").val(ui.item.titolare);
                       return false;
                   },
                   select: function( event, ui ) {            
                       $("#titolare").val(ui.item.titolare);
                       return false;
                   }
               })
               .data( "autocomplete" )._renderItem = function(ul, item) {          
                   return $( "<li></li>" )
                       .data( "item.autocomplete", item )
                       .append( "<a>" + item.titolare + "<br />("+ item.cod_fis +")</a>")
                       .appendTo( ul );
               };            
   
         }                                             
       }
     });        
   });
   

Answer 1

You do not want to use keyUp function. You can give url as the source like this,

$(document).ready(function(){
    $( "#titolare" ).autocomplete({
             source: "page.php",                }
             focus: function( event, ui ) {             
                        $("#titolare").val(ui.item.titolare);
                        return false;
                    },
                    select: function( event, ui ) {            
                        $("#titolare").val(ui.item.titolare);
                        return false;
                    }
    }).data( "autocomplete" )._renderItem = function(ul, item) {          
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.titolare + "<br />("+ item.cod_fis +")</a>")
                        .appendTo( ul );
                };  
});

And in your page.php you can return relavant JSON object list.
http://jqueryui.com/demos/autocomplete/#remote