[英]ajax auto-completion bind data to textbox
我正在从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调用返回数据(成功的数据)
[
{"id": 1,"name": "Customer_01"},
{"id": 2,"name": "Customer_02"},
{"id": 3,"name": "Customer_03"},
{"id": 4,"name": "Customer_04"}
]
需要自动完成将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);
}
});
});
};
最终工作代码:
$(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"
});
}
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.