how to use jquery autocomplete function with ajax?

Question

I get data from the ajax but i want to make with jquery autocomplete.

I fill the name in the text box using autocomplete.

data from the 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": ""
},

I want to show the name of customer when i click in the input box. And i wonder how to fix this problem using the ajax and auto complete.

Jquery Code

$('.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

jquery ui autocomplete expects object with label and value properties. Here label is used to display and value is value.

Below is sample 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/

Answer 2

       $( "#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 );
            };