comment utiliser jquery autocomplete fonction avec ajax?

Question

Je reçois des données de l'ajax mais je veux faire avec jquery autocomplete.

Je remplis le nom dans la zone de texte en utilisant saisie semi-automatique.

données de la ajax

{ 
"id": "2", 
"name": "Jenny Doe", 
"phone": "", 
"email": "elsa@arendelle", 
"password": null, 
"registered": "2014-04-11 15:06:02", 
"address": "", 
"email_subscription": "0", 
"email_verified": "0", 
"reset_password": null, 
"facebook_uid": null, 
"title": "", 
"phone2": "", 
"gender": null, 
"booking_date": "0000-00-00", 
"birthday": "0000-00-00", 
"nationality": "", 
"passport": "" 
}, 

Je veux montrer le nom du client lorsque je clique dans la zone de saisie. Et je me demande comment résoudre ce problème en utilisant l'ajax et auto complète.

code Jquery

$('.customer').on('click', '.customer_name', function(){ 
     var name = $(this).val(); 
     var customer_url = '/api/users?name_fulltext' + name; 
     console.log(customer_url); 
     $.getJSON(customer_url, function(data){ 
      customer_cache[name]= []; 
      for (var j in data) { 
       //index the results by id 
       customer_cache[name][data[j]["name"]] = data[j]; 
       var customer_name = customer_cache[name][data[j]["name"]]; 
      } 
     }); 

     $('.customer_name').autocomplete({ 
     }); 
}); 

Answer 1

 $("#element_id").autocomplete({ 
       source: function(request, response) { 
        $.get("Ajax Url", 
        { 
         query: request.term 
        },function (data) { 
         var d = JSON.parse(data); 
         response(d); 
        }); 
       }, 
       select: function(event, ui) { 
        //do something nice 
        return false; 
       }, 
       minLength: 1, 
      }) 
      .data("ui-autocomplete")._renderItem = function(ul, item) { 
       return $("<li>") 
       .append("<a>" + item.name +"</a>") 
       .appendTo(ul); 
      }; 

Answer 2

jquery ui autocomplete objet avec label attend et value propriétés. Ici label est utilisé pour afficher et value est la valeur.

est Ci-dessous exemple autocomplete Code

var cache = {}; 
$(".customer_name").autocomplete({ 
     minLength: 2, 
     mustMatch: true, 
     focus: function (event, ui) { 
      //ui.item.label contains value 
      return false; 
     }, 
     change: function (event, ui) { 
      if (!ui.item) { 
       $(".customer_name").focus(); 
       $(".customer_name").val(""); 


      } 

     }, 
     select: function (event, ui) { 
      var val= ui.item.value; 
      return false; 
     }, 
     source: function (request, response) { 
      var term = request.term; 
      if (term in cache) { 
       response(cache[term]); 
       return; 
      } 
      $.ajax({ 
       url: url 
       contentType: 'application/json; charset=utf-8', 
       type: 'GET', 
       data: "{'keywords':'" + request.term + "'}", 
       dataType: 'json', 
       error: function (xhr, status) { 
        //error occured 
       }, 
       success: function (data) { 
        cache[term] = data; 
        response(data); 
       } 
      }); 
     } 
    }); 

http://jqueryui.com/autocomplete/