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 ui 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/

如何使用jjery自动完成功能与ajax？

2 个答案: