如何使用jQuery的自动完成功能与Ajax？

Question

我从ajax获取数据，但我想用jquery自动完成。

我使用自动完成填写文本框中的名称。从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": "" 
}, 

数据我想告诉顾客的名字时，我在输入框中单击。 我想知道如何使用ajax和自动完成来解决这个问题。

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用户界面autocomplete期待与label和value属性对象。这里用label来显示，value是值。

下面是样品autocomplete代码

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/