Suggest Framework使用教程

一、什么是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"));