如何在 ajax 中使用 jquery 自动完成功能？答案

【问题标题】：how to use jquery autocomplete function with ajax?如何在 ajax 中使用 jquery 自动完成功能？
【发布时间】：2014-06-10 06:34:25
【问题描述】：

我从 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({
        });
});

【问题讨论】：

标签： jquery ajax json jquery-autocomplete

【解决方案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 );
            };

【讨论】：

【解决方案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/

【讨论】：