标题: Suggest Framework使用教程
作者: dnawo
日期: 2008-09-25 03:56 AM
分类: 脚本语言
内容: 一、什么是Suggest Framework
Suggest Framework 顾名思义，就是仿 Google Suggest 的一个小框架，让你的文本框也有提示功能。利用Suggest Framework你可以在自己的网站上很轻松实现“输入提示”效果，这种效果会很大程度上提高用户体验，提高搜索效率。一个页面上可以出现多个搜索框，每个搜索框都可以实现单独配置。
二、.使用Suggest Framework
1. 引用Suggest Framework：
复制内容到剪贴板 程序代码<script type="text/javascript" src="SuggestFramework.js"></script>
<script type="text/javascript">window.onload = initializeSuggestFramework;</script>
2. 添加提示框样式：
复制内容到剪贴板 程序代码<link rel="stylesheet" type="text/css" href="SuggestFramework.css" />
3. 给需要使用提示功能的文本框添加name、action属性：
复制内容到剪贴板 程序代码<input id="TextBox1" name="TextBox1" action="Default.asp" type="text" />
说明：除action属性外，Suggest Framework还给文本框添加了4个属性columns、capture、heading和delay，下边分别说明：
1).action属性：处理页面地址。在文本框中输入的字符会以get方式(?name=表单名称&q=关键字)提交到此页面，此页面负责处理并返回结果[1]；
2).columns属性：设置提示列表显示的列数。当返回的结果是多维数组时设置分成几列显示，默认为1；
3).capture属性：当columns的值大于1时，设置文本框将显示第几列的值，默认为1，显示第一列的值；
4).heading属性：设置提示列表第一行为标题，不可选，默认为false；
5).delay属性：查询延迟时间，单位毫秒；
点击这里下载示例
三、注意事项
1.以get方式提交的字符是经utf-8编码的，如果处理页面不是utf-8需转换一下，还有返回的结果也应是utf-8的；
2.官方提供的js设置capture似乎不起作用，修改了下sfwSelectThis函数：
复制内容到剪贴板 程序代码function sfwSelectThis(instance, index)
{
if(sfw[instance].columns > 1 && sfw[instance].capture > 1)
sfw[instance].hiddenInput.value = sfw[instance].suggestions[sfw[instance].suggestionsIndex][sfw[instance].capture - 1];
if(!isNaN(index)) { sfw[instance].suggestionsIndex = index; }
var selection = sfw[instance].suggestions[sfw[instance].suggestionsIndex];
//2008-09-25修改 By:dnawo
//if(sfw[instance].columns > 1) { selection = selection[0]; }
if(sfw[instance].columns > 1 && sfw[instance].capture > 1)
selection = selection[sfw[instance].capture - 1];
else if (sfw[instance].columns > 1)
selection = selection[0];
sfw[instance].inputContainer.value = selection;
sfw[instance].previous = selection;
sfwHideOutput(instance);
};
四、相关地址
1.Suggest Framework下载：http://sourceforge.net/projects/suggest/
2.参考文章：http://bbs.okajax.com/viewthread.php?tid=1788&extra=&page=1
[1]返回一维数组格式：new Array("111","222","333");，二维数组格式：new Array(new Array("aaa","111"),new Array("bbb","222"),new Array("ccc","333"));
+ 查看当前日志评论 (0)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.031 ms
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.031 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.047 ms