栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用AJAX源代码和appendTo了解并实现jQuery自动完成功能

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用AJAX源代码和appendTo了解并实现jQuery自动完成功能

source: function(request, response) {...}
这是做什么的?为什么需要它。

由于您正在执行自定义AJAX POST以获取数据,因此必须指定一个函数,该函数

response
使用所需的自动完成候选者来调用回调。

在最简单的用例中,您只需为

source
参数提供一个字符串,小部件将针对带有附加的URL发出GET请求
?term=(term)
。由于您要执行POST并发送不同的术语,因此必须使用的功能版本
source

PS:您应该提供

$.ajax
呼叫
request.term
而不是
$(".find_group_ac").val()


function(data){response($。map(data,function(obj){返回的数据是什么格式?我知道数据是JSON格式的,但是.map的意义是什么?有必要这样做吗?有好处吗?

自动完成小部件期望数组数据源的项目满足以下要求之一:

  1. 该项目必须是单个字符串,或者:
  2. 该项目必须是具有
    label
    属性
    value
    ,,属性或两者兼有的对象。

考虑到这一点,如果您正在使用
以这种方式格式化JSON的服务器端资源,则必须在将数据提供给

response
函数之前转换数据以符合那些规范。常用的方法是使用
$.map
,它在数组上进行迭代并转换每个元素。


使用

appendTo
和时
renderItem
,是否必须返回上述成功数据?

不,但是它们经常一起使用。

假设您有一个额外的属性(如

description
)要显示在候选列表中。在这种情况下,您可以将服务器端结果转换为自动完成期望的格式(包括
label
value
仍然包括
description
),但是您也想显示该
description
属性。在这种情况下,您需要重载
_renderItem


或者根据上述数据,如何正确使用appendTo和renderItem更改检索值的格式和显示?

如果在此答案中可以充分回答以上问题,那么我需要做的就是发布一些将这些概念整合在一起的代码:

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

jQueryUI文档页面上有关自动完成的示例实际上相当广泛,可能会有所帮助。具体来说,请务必签出:

  • 自定义数据和显示
  • 远程JSONP数据源


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/398044.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号