仿google搜索提示 SuggestFramework的使用

新型农村葫芦娃

新型农村葫芦娃

2016-02-19 11:30

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享仿google搜索提示 SuggestFramework的使用教程,希望对大家能有一点小小的帮助。
一.首先来看一下什么是suggest framework
Suggest Framework 故名思意,就是仿 Google Suggest 的一个小框架,让你的文本框也有提示功能。利用suggest framework你可以在自己的网站上很轻松实现“输入提示”效果,这种效果会很大程度上提高用户体验,提高搜索效率。
一个页面上可以出现多个搜索框,每个搜索框都可以实现单独配置。
此框架无浏览器限制,基本兼容当前的绝大多数浏览器,包括Internet Explorer 5+ (Win/Mac)、Firefox (Win/Mac)、Opera 8+等等。

二.下面来介绍一下怎么安装
你只需要复制SuggestFramework.js到你的服务器,然后自定义提示效果的css样式,实现个性的搜索提示。
而css样式文件,需要你自己做好,并且加入到每一个页面。
补充:SuggestFramework.js已经试用Dojo ShrinkSafe进行压缩,具体请看http://alex.dojotoolkit.org/shrinksafe/

三.然后介绍一下如何使用
在网页的head/head标签中,加入下面两句:

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 其他提示

四.提示,如果出现乱码或者javascript脚本错误请用下面方法解决。
1. 给后台返回数据的页面(例如display.asp) 添加一个 GB2312 转 UTF-8 的函数,使用此函数把数据库读出来的内容转成 UTF-8 编码。
2. 如果是后台为asp页面,代码首行添加 [email=%@LANGUAGE=”VBSCRIPT]%@LANGUAGE=”VBSCRIPT[/email]” CODEPAGE=”936″% 指令。
3. 把后台返回数据的页面(例如display.asp)文件存成 UTF-8 格式。
e文原文地址:http://sourceforge.net/project/shownotes.php?group_id=145701&release_id=399504
官方下载地址:http://sourceforge.net/project/showfiles.php?group_id=145701
展开更多 50%)
分享

猜你喜欢

仿google搜索提示 SuggestFramework的使用

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

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

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

s8lol主宰符文怎么配

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

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

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

如何使用Google搜索快速找到需要的资讯

浏览器
如何使用Google搜索快速找到需要的资讯

lol偷钱流符文搭配推荐

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

Google搜索技术揭秘

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

仿Google和Windows Live的拖拽

Web开发
仿Google和Windows Live的拖拽

lolAD刺客新符文搭配推荐

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

快速为Win8.1屏幕截图的技巧

快速为Win8.1屏幕截图的技巧

ASP AJAX 静态分页

ASP AJAX 静态分页
下拉加载更多内容 ↓