理解和实施的jQuery自动完成与AJAX源和appendTo [英] Understanding and implementing jQuery autocomplete with AJAX source and appendTo
问题描述
下面是我尝试让 appendTo 使用jQuery自动完成与AJAX源工作。
我有多个问题，这些问题希望能帮助许多人谁正在努力与理解来实现自动完成与和AJAX源的正确方法。
1）来源：功能（请求，响应）{...}
这是什么呢？为什么需要它。
2）什么格式呢功能（数据）{响应（$。图（数据，函数（OBJ）{返回的数据？我知道的数据是JSON格式，但什么是 .MAP 点？是否有必要这么做吗？有没有好处？
3A）使用 appendTo 和 renderItem ，是有必要在上述成功返回的数据？
3b）中任一或，根据以上数据，你如何正确地使用appendTo和renderItem改变你的检索值的格式和显示？
$（函数（）{
$（.find_group_ac）.autocomplete（{
的minLength：1，
来源：功能（请求，响应）{
$阿贾克斯（{
网址：欢迎/搜索/，
数据：{期限：$（find_group_ac。）VAL（）}，
数据类型：JSON，
键入：POST，
成功：功能（数据）{响应（$地图。
（数据，函数（OBJ）{
返回 {
标签：obj.name +：+ obj.description，
值：obj.name，
ID：obj.name
};}））;}
}）;
}
}），数据（自动完成）._ renderItem =功能（UL，项目）{
返回$（＆LT;李＆GT;＆LT; /李＆gt;中）
.DATA（item.autocomplete，项目）
.append（＆其中a取代;+ item.label +＆所述峰; br＆gt;中+ item.desc +＆所述; / A＆gt;中）
.appendTo（微升）;
};
}）;
这似乎是很多答案，但我敢肯定，这将是有价值的许多JavaScript的新手，当然我自己。
来源：功能（请求，响应）{...}这是什么呢？为什么需要它。
既然你做一个自定义的AJAX POST的方法获取数据，你必须指定一个函数，调用响应回调所需的自动完成功能的候选人。
在最简单的使用情况，您可以只提供一个字符串源参数，和小部件会发出针对该URL的GET请求附加一个？长期=（长期）。既然你做一个POST并发送了不同的术语，你必须使用源功能版本。
PS：应提供的 $ AJAX 与 request.term 调用而不是 $（。find_group_ac）。VAL（） 的
什么格式做功能（数据）{响应（$。图（数据，函数（OBJ）{ 返回数据？我知道数据是JSON格式，但什么是 .MAP点？是否有必要这么做吗？有没有好处？
在自动完成构件预计数组数据源谁的项目符合下列条件之一：
- 的项目必须是一个字符串，或：
- 的项目必须是一个对象具有
标签属性，一个值，财产，或两者兼而有之。
考虑到这一点，如果你使用的JSON是一种服务器端资源的没有的这种方式格式化的，你必须将其提供给之前转换数据，以满足这些规范响应功能。要做到这一点的常用方法是使用 $。地图 ，它遍历数组，将每个元素。
在使用
appendTo和renderItem，是不是又回到必要上述成功的数据？
没有，但它们经常一起使用。
假设你有一个额外的属性（如说明）想要在候选列表中显示。在这种情况下，你可能会改变服务器端结果进入的格式自动完成预期（包括标签和值但还是包括说明），但你也想显示的说明属性。在这种情况下，你需要重载 _renderItem 。
无论是或，根据以上数据，你如何正确地使用appendTo和renderItem改变你的检索值的格式和显示？
如果问这上面的人的问题，在这个答案足以回答，那么我应该需要做的就是发布一些code，带来了概念放在一起：
$（.find_group_ac）.autocomplete（{
的minLength：1，
来源：功能（请求，响应）{
$阿贾克斯（{
网址：欢迎/搜索/，
数据：{期限：$（find_group_ac。）VAL（）}，
数据类型：JSON，
键入：POST，
成功：功能（数据）{
回应（$。图（数据，函数（OBJ）{
返回 {
标签：obj.name，
值：obj.name，
说明：obj.description，
ID：obj.name //除非您使用的是其他地方并不真正需要这个。
};
}））;
}
}）;
}
}），数据（自动完成）._ renderItem =功能（UL，项目）{
// _renderItem的内部，你可以使用存在于我们建立的每个项目的任何财产
//与$ .MAP上述* /
返回$（＆LT;李＆GT;＆LT; /李＆gt;中）
.DATA（item.autocomplete，项目）
.append（＆其中a取代;+ item.label +＆所述峰; br＆gt;中+ item.description +＆所述; / A＆gt;中）
.appendTo（微升）;
};
实际上是相当广泛，可帮助 jQueryUI的文档页面上的例子自动完成。具体而言，一定要检查出：
Below is my attempt at getting appendTo to work with jQuery autocomplete with AJAX source.
I have multiple questions, which will hopefully help many others who are struggling with understanding the correct way to implement autocomplete with and AJAX source.
1) source: function(request, response) {...}
What does this do? Why is it needed.
2) What format does function(data){ response($.map (data, function(obj) { return the data in? I realize the data is in JSON format, but what is the point of .map? Is it necessary to do this? Are there benefits?
3a) When using appendTo and renderItem, is it necessary to have the above mentioned success data returned?
3b) Either or, depending on the above data, how do you correctly use appendTo and renderItem to change the formatting and display of your retrieved values?
$(function() {
$( ".find_group_ac" ).autocomplete({
minLength: 1,
source: function(request, response) {
$.ajax({
url: "welcome/search/",
data: { term: $(".find_group_ac").val()},
dataType: "json",
type: "POST",
success: function(data){ response($.map
(data, function(obj) {
return {
label: obj.name + ': ' + obj.description,
value: obj.name,
id: obj.name
};}));}
});
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
This might seem like a lot to answer, but I'm sure it will be valuable to many javascript newbies and certainly myself.
source: function(request, response) {...}What does this do? Why is it needed.
Since you're doing a custom AJAX POST to get the data, you must specify a function that calls the response callback with the desired autocomplete candidates.
In the simplest use case, you can just supply a string to the source parameter, and the widget will issue a GET request against that URL with an appended ?term=(term). Since you're doing a POST and sending up a different term, you must use the function version of source.
PS: You should supply the $.ajax call with request.term instead of $(".find_group_ac").val()
What format does function(data){ response($.map (data, function(obj) { return the data in? I realize the data is in JSON format, but what is the point of .map? Is it necessary to do this? Are there benefits?
The autocomplete widget expects an array data source who's items meet one of the following requirements:
- The item must be a single string, or:
- The item must be an object with a
labelproperty, avalue, property, or both.
With this in mind, if you're using a server-side resource whose JSON is not formatted in this way, you have to transform the data to meet those specifications before supplying it to the response function. The common way to do this is to use $.map, which iterates over an array and transforms each element.
When using
appendToandrenderItem, is it necessary to have the above mentioned success data returned?
No, but they are often used together.
Say you have an extra property (like description) that you want to display in the candidate list. In this case, you might transform the server-side result into the format autocomplete expects (to include label and value but still include description), but you also want to display the description property. In this case, you'll need to overload _renderItem.
Either or, depending on the above data, how do you correctly use appendTo and renderItem to change the formatting and display of your retrieved values?
If the questions asked above this ones are answered adequately in this answer, then all I should need to do is post some code that brings the concepts together:
$( ".find_group_ac" ).autocomplete({
minLength: 1,
source: function(request, response) {
$.ajax({
url: "welcome/search/",
data: { term: $(".find_group_ac").val()},
dataType: "json",
type: "POST",
success: function(data) {
response($.map(data, function(obj) {
return {
label: obj.name,
value: obj.name,
description: obj.description,
id: obj.name // don't really need this unless you're using it elsewhere.
};
}));
}
});
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
// Inside of _renderItem you can use any property that exists on each item that we built
// with $.map above */
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "<br>" + item.description + "</a>")
.appendTo(ul);
};
The examples on jQueryUI's documentation page for autocomplete are actually quite extensive and could be helpful. Specifically, be sure to check out:
这篇关于理解和实施的jQuery自动完成与AJAX源和appendTo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
