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

我从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}"  />

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

---

有人能帮我吗？

您可以将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);
                }
            });
        });
    };

函数getFormModel（）{ var availableTags=[]； for（formModel中的var类别）{ var字段=formModel[类别]； for（字段中的变量字段）{ availableTags.push（{ 类别:类别,， 标签：字段， 值：字段[field]}； } } 返回可用的标签； } 函数集自动完成（el）{ $（el）.自动完成({ 来源：getFormModel（）， 创建：函数（）{ //对jQuery自动完成小部件的访问权因具体情况而异 //在某些jQueryUI版本上，您还可以尝试.data（'autocomplete'） $（this）.data（'uiAutocomplete'）。\u renderMenu=customRenderMenu； } }); } var customRenderMenu=功能（ul，项目）{ var self=这个； var categoryArr=[]； 函数包含（项、数组）{ var=false； $.each（数组、函数（索引、值）{ 如果（项==值）{ 包含=真； 返回false； } }); 返回包含； } $。每个（项目、功能（索引、项目）{ 如果（！包含（item.category，categoryArr））{ 类别推送（项目类别）； } 控制台日志（类别）； }); $。每个（类别、功能（索引、类别）{ ul.追加（“

”+类别+“

”； $。每个（项目、功能（索引、项目）{ 如果（item.category==类别）{ 自提交数据（ul，项目）； } }); }); }; 最终工作代码：

$(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"

                });
            }

        });
    });
});

---

JSON从ajax调用返回数据（成功时的数据）[{“id”：1，“name”：“Customer_01”}，{“id”：2，“name”：“Customer_02”}，{“id”：3，“name”：“Customer_03”}，{“id”：4，“name”：“Customer_04”}]Textbox”需要将JSON的name字段绑定到Textbox作为自动完成

$(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"

                });
            }

        });
    });
});