ajax自动完成绑定数据到文本框

Question

我正在从 ajax 调用中获取数据，如何使用名称和 id 作为字段绑定文本框自动完成的数据。

如何在前端绑定数据并在后端java中获取选定名称的id。

$(document).ready(function() {
$(function() {
        $("#customerName").autocomplete({     
        source : function(request, response) {
        $.ajax({
                url : "/customer/getByNames",
                type : "GET",
                data : {
                        name : $("#customerName").val()
                },
                dataType : "json",
                success : function(data) {

               response(data);
                }
        });
}
});
});
});

<input type="text" id="customerName" name="customerName"
            th:field="*{customer.name}"  />

从ajax调用返回的JSON数据（成功时的数据）

[ 
{"id": 1,"name": "Customer_01"}, 
{"id": 2,"name": "Customer_02"}, 
{"id": 3,"name": "Customer_03"},
{"id": 4,"name": "Customer_04"} 
] 

需要将JSON的名称字段绑定到文本框作为自动完成

谁能帮帮我？

Answer 1

您可以将 AJAX 调用中的数据传递给初始化自动完成插件的方法。

该方法可以有一个选择器的名称来初始化，或者如果您的选择器在数据中，那么您可以将数据映射到要为其绑定自动完成的选择器数组。

$(document).ready(function()
        $.ajax({
                url : "/customer/getByNames",
                type : "GET",
                data : {
                        name : $("#customerName").val()
                },
                dataType : "json",
                success : function(data) {
                    setAutoComplete(data);
                }
        });
});

function setAutoComplete(data) 
{
    var selectors = ["#someId", "someotherId"];
    //if your selector are in the data then use data.map to get your selectors.
    selectors.forEach(function(selector)
    {
        $(selector).autocomplete({
            source: data
        });
    }
}

如果您的数据有特殊格式，您可以使用自定义渲染函数来初始化自动完成插件。

例如，这允许您使用此 JSON 集将具有类别和字段的自动完成数据分组为 formModel：

{
   "Contact":{
      "FirstName":"Contact.FirstName",
      "MiddleInitial":"Contact.MiddleInitial",
      "LastName":"Contact.LastName",
      "Address1":"Contact.Address1",
      "Address2":"Contact.Address2",
      "City":"Contact.City",
      "State":"Contact.State",
      "PostalCode":"Contact.PostalCode",
      "WorkPhone":"Contact.WorkPhone",
      "HomePhone":"Contact.HomePhone",
      "Email":"Contact.Email"
   },

   "UDFs":{
      "ModifiedBy":"Contact.UDFs.ModifiedBy",
      "ModifiedDate":"Contact.UDFs.ModifiedDate",
      "SessionId":"Contact.UDFs.SessionId",
      "FormData":"Contact.UDFs.FormData"
   }
}

我使用这个代码：

function getFormModel() {
        var availableTags = [];
        for (var category in formModel) {
            var fields = formModel[category];
            for (var field in fields) {
                availableTags.push({ 
                    category: category,
                    label: field, 
                    value: fields[field] });
            }

        }
        return availableTags;
    }

function setAutoComplete(el) {

        $(el).autocomplete({
            source: getFormModel(),
            create: function () {
                //access to jQuery Autocomplete widget differs depending
                //on some jQuery UI versions - you can also try .data('autocomplete')
                $(this).data('uiAutocomplete')._renderMenu = customRenderMenu;
            }
        });
    }

var customRenderMenu = function (ul, items) {
        var self = this;
        var categoryArr = [];

        function contain(item, array) {
            var contains = false;
            $.each(array, function (index, value) {
                if (item == value) {
                    contains = true;
                    return false;
                }
            });
            return contains;
        }

        $.each(items, function (index, item) {
            if (!contain(item.category, categoryArr)) {
                categoryArr.push(item.category);
            }
            console.log(categoryArr);
        });

        $.each(categoryArr, function (index, category) {
            ul.append("<li class='ui-autocomplete-group'>" + category + "</li>");
            $.each(items, function (index, item) {
                if (item.category == category) {
                    self._renderItemData(ul, item);
                }
            });
        });
    };

Answer 2

最终工作代码：

$(document).ready(function() {
    $(function() {
        $("#customerName").autocomplete({
            source : function(request, response) {
                $.ajax({
                    url : "/customer/getByNames",
                    type : "GET",
                    data : {
                        name : $("#customerName").val()
                    },
                    dataType : "json",
                    success : function(data) {

                        $("#customerName").autocomplete({
                            source : data
                        });
                    },
                    appendTo: "#customerNameResult"

                });
            }

        });
    });
});