suggest Framework 框架实现自动提示功能解说和范例

Suggest FrameWork最新版本为SuggestFramework-0.31

以下为工程的详细开发步骤:

 

一.首先来看一下什么是SuggestFrameWork ework
Suggest Framework 故名思意,就是仿 Google Suggest 的一个小框架,让你的文本框也有提示功能 。利用suggest framework你可以在自己的网站上很轻松实现“输入提示”效果 ,这种效果 会很大程度上提高用户 体验,提高搜索效率。
一个页面 上可以出现多个搜索框,每个搜索框都可以实现单独配置。
此框架无浏览器 限制,基本兼容当前的绝大多数浏览器 ,包括Internet Explorer 5+ (Win/Mac)、Firefox (Win/Mac)、Opera 8+等等。

 

二.下面来介绍一下怎么安装
你只需要复制SuggestFramework.js到你的服务器 ,然后自定义提示效果的css样式,实现个性的搜索提示。
而css样式文件,需要你自己做好,并且加入到每一个页面。


三.然后介绍一下如何使用
网页 的<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&amp ;release_id=399504
官方下载地址:http://sourceforge.net/project/showfiles.php?group_id=145701



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值