章节
问答
课签
笔记
评论
占位
占位

搜索插件——autocomplete

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下:

$(textbox).autocomplete(urlData,[options]);

其中,textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。

例如,当用户在文本框输入内容时,调用搜索插件的autocomplete()方法返回与输入内容相匹配的字符串数据,显示在文本框下,提示选择,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当文本框与搜索插件相绑定后,输入任意字符时,都将返回与之相匹配的字符串,提示用户选择,文本框在空白双击时,显示全部提示信息。

任务

我来试试,亲自感受一下搜索插件与文本框绑定使用的过程

  1. 在下列代码的第27行,通过调用autocomplete()方法将文本框绑定搜索插件,当文本框输入字符时,自动匹配与字符相近的内容,并显示在文本框底部。

?不会了怎么办
  1. 首先,获取绑定搜索插件的文本框对象,然后,通过该对象调用autocomplete()方法将文本框与搜索插件相绑定,方法中第一个参数为匹配数据字符串。
  2. “autocomplete”方法名书写是否完整。
||
1
<!DOCTYPE html
    PUBLIC "
    -//W3C//DTD
    XHTML 1.0
    Transitiona
    l//EN"
    "http://www
    .w3.org/TR
    /xhtml1/DTD
    /xhtml1
    -transition
    al.dtd">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
#divtest
{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / lijikai1937
学了好久java 依然看不懂源码,哈哈哈,我觉得自己算正常。

最新回答 / 麓鹿不迷路
yeah!you are right!amazing!we are family!

最新回答 / fengyunzhu
因为慕课网把http升级为https了,所以代码中的http都必须改为https

最新回答 / Charlene成成
网上找的:16) formatItem (Function) 为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中.Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数.Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值. 根据以上,我的理解:三个参数: data是返回的结果数组,  i是...

最新回答 / 十指狂魔
http 要改为 https

最赞回答 / 我要SSR
http://www.cnblogs.com/Peter-Zhang/archive/2011/10/22/2221147.html直接去看参数说明

最赞回答 / qq_BlackDatura_0
.result(SearchCallback),SearchCallback()方法在用户选中某一项后触发,其中各参数:event: 事件对象. data: 选中的数据行.formatted:formatResult函数返回的值

最新回答 / 精慕门5098903
16) formatItem (Function)为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中.Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数.Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.17) formatResult (Function)和formatItem类似...

最新回答 / 淡水狗
formatResult和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.

已采纳回答 / qq_ty利强yl_0
我觉得这个几个参数都是在那个autocomplete.js里面的,这里只是一个小练习,不会讲具体的。

已采纳回答 / DD慕帆
应该是你的代码写错了吧,那个文本输入框,如果你没有改的话,他的id和name都是"txtSearch",而,你运用autocomplate控件的时候,写的是$("#textSearch"),你看一下是不是
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言