ajax Suggest类似google的搜索提示效果

2016-02-19 11:30 7 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享ajax Suggest类似google的搜索提示效果,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

实现:
script type="text/javascript" src="/path/to/SuggestFramework.js"/script
script type="text/javascript"window.onload = initializeSuggestFramework;/script
有了上面两句后,每个取了名的文本框会多出五个属性:
1.action 必须。接受 GET 方式提交的数据,并返回相关 Javascript 数组的动态页。
2.capture 如果返回的结果不止一列(比如本例中的单词和中文意思),将要替换用户输入的那一列(从 1 开始算)。通常这个和数据库字段相对应。
可选,默认为 1.
3.columns 下拉显示的列数,比如本例中,按字母查询单词,并将中文意思显示在右侧。可选,默认为 1.
4.delay 查询延时,单位为毫秒。较低的延时会得到更快的反应,但会加重服务器负担。可选,默认为 1000(1秒)。
5.heading 如果设为 true ,第一个数组值将作为不可选择项(标题栏)。当有两列或两列以上数据时非常有用。可选,默认为 false.
数据提交只需要两个数据
1.type 输入框的name
2.q 搜索关键字(默认UTF-8编码)
您下载的压缩包中,已经包含php和ColdFusion示例,当然这个框架可以适用于所有的编程语言,无平台限制。后台数据输出就是一条 Javascript 语句。一维数组这么写:
new Array(”val1″, “val2″, “val3″);
二维数组这么写:
new Array(
new Array(”第1行条第1列”, “第1行第2列”),
new Array(”第2行条第1列”, “第1行条第2列”),
new Array(”第3行条第1列”, “第1行条第2列”)
);
最后介绍一下,css中需要定义的4个类
.SuggestFramework_List 提示内容所在区域
.SuggestFramework_Heading 第一条提示
.SuggestFramework_Highlighted 设置高亮的一条提示
.SuggestFramework_Normal 其他提示
下载地址 http://xiazai.jb51.net/200903/yuanma/SuggestFramework-0.31.zip

来源:https://www.tulaoshi.com/n/20160219/1597713.html

延伸阅读
在我们构造Google 搜索程序之前我们还需要Google Web APIs Developer‘s Kit,你可以从http://vip.5d.cn/xyg/google.rar下载直接解压缩就可以了。里面已经含了所需要的文件和已经编译好的文件,官方地址是http://www.google.com/apis。不过实际上对我们有用的只是GoogleSearch.wsdl这个文件,把这个文件和SWF文件放在同一文件夹运行既可。 ...
标签: Web开发
一、密码长度: 5 分: 小于等于 4 个字符 10 分: 5 到 7 字符 25 分: 大于等于 8 个字符 二、字母: 0 分: 没有字母 10 分: 全都是小(大)写字母 20 分: 大小写混合字母 三、数字: 0 分: 没有数字 10 分: 1 个数字 20 分: 大于等于 3 个数字 四、符号: 0 分: 没有符号 10 分: 1 个符号 25 分: 大于 1 个符号 五、奖励: 2 分: 字母和数字 ...
标签: 浏览器
如何使用Google搜索快速找到需要的资讯   Google已成为我们生活中不可或缺的重要角色,举凡食、衣、住、行、育、乐都可以透过它来得到解答,在资讯过度泛滥的网际网路世代,找出正确资讯远比获取大量资讯来得困难,要如何在茫茫网海中快速找到你要的东西呢?今天就要来分享一些Google搜寻的撇步。 今日课程:Google搜寻 课程...
标签: 浏览器
谷歌google搜索打不开怎么办?   谷歌搜索从2014年6月开始,搜索开始被全面封锁,许多网友反映谷歌打不开 了。百度指数也显示从6月起,搜索谷歌打不开怎么办 谷歌打不开解决办法 的网友日益增多。国内纵然有百度,但是谷歌作为世界第一搜索引擎,很多地方还是谷歌所不能及的。小编亲自测试了各种公开方法,为大家提供以下几种亲测有...
标签: Web开发
摘要:用AJAX编写更具交互性的B/S程序是当今世界一大潮流,然而AJAX的缺点也显而易见,缺乏一个强有力的IDE使得编写,测试AJAX程序异常困难。GWT(Google Web Toolkit)的出现让你轻松的跨过这些屏障自在的构建你自己的AJAX程序。 工具箱本站收藏 美味书签 投票评分 发表评论 复制链接 本文由chelson发表在Ajax论坛,原贴: http://www.matrix.or...

经验教程

542

收藏

44
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部