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

yihan以寒

yihan以寒

2016-02-19 11:30

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

猜你喜欢

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

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

ASP+AJAX做类似google的搜索提示

Web开发
ASP+AJAX做类似google的搜索提示

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

AJAX实现仿Google Suggest效果

Web开发
AJAX实现仿Google Suggest效果

用AJAX技术做Google Suggest效果

Web开发
用AJAX技术做Google Suggest效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

仿google搜索提示 SuggestFramework的使用

Web开发
仿google搜索提示 SuggestFramework的使用

Google搜索技术揭秘

Linux Linux命令 Linux安装 Linux编程 Linux桌面 Linux软件 Linux内核 Linux管理
Google搜索技术揭秘

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

android 默认时间格式修改方法

android 默认时间格式修改方法

Android数据类型之间相互转换系统介绍

Android数据类型之间相互转换系统介绍
下拉加载更多内容 ↓