gpt4 book ai didi

javascript - ajax自动完成将数据绑定(bind)到文本框

转载 作者:行者123 更新时间:2023-12-03 03:49:01 29 4
gpt4 key购买 nike

我从ajax调用获取数据,如何绑定(bind)数据以使用名称和ID作为字段自动完成文本框。

如何在前端绑定(bind)数据并在后端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 的名称字段绑定(bind)到文本框作为自动完成

谁能帮帮我吗?

最佳答案

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

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

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

关于javascript - ajax自动完成将数据绑定(bind)到文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45247837/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com