上一篇: 
下一篇: 
文章来自: 
引用通告: 
Tags: 
最新日志:
不错呦！smile@林凯西，确保“准备文件”中的几个文件都有安装，S...您好，看了您这篇帖子觉得很有帮助。但是有个问题想请...我的修改过了怎么还被恶意注册呢 @jjjjiiii 用PJ快9年了，主要是A...PJ3啊，貌似很少有人用PJ了，现在不是WP就是z...@332347365，我当时接入时错误码没有-10...楼主，ChkValue值应为-103是什么意思呢？...大哥 你最近能看到我发的信息，请跟我联系，我有个制...
Suggest Framework使用教程
编辑:dnawo 日期:2008-09-25
一、什么是Suggest Framework
Suggest Framework 顾名思义，就是仿 Google Suggest 的一个小框架，让你的文本框也有提示功能。利用Suggest Framework你可以在自己的网站上很轻松实现“输入提示”效果，这种效果会很大程度上提高用户体验，提高搜索效率。一个页面上可以出现多个搜索框，每个搜索框都可以实现单独配置。
二、.使用Suggest Framework
1. 引用Suggest Framework：
2. 添加提示框样式：
3. 给需要使用提示功能的文本框添加name、action属性：
说明：除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函数：
四、相关地址
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"));
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>
<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);
};
{
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 | 引用: 0 | 查看次数: 7254
发表评论
请登录后再发表评论！
