仿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

赞 (0)

相关推荐

  • inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)

    像QQ邮箱提示.百度的搜索框提示.淘宝的商品搜索提示等,现在有不少的网站都有类似效果,以提升用户体验. 使用方法: new InputSuggest({ input HTMLInputElement 必选 data Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选 containerCls 容器className itemCls 容器子项className activeCls 高亮子项className width

  • javascript suggest效果 自动完成实现代码分享

    javascript suggest效果 自动完成实现代码分享

    首先,用到的框架当然是我的框架mass Framework,当然你用其他框架也可以,如jQuery,没有什么复杂的东西.只要弄懂原理,一下子就能搞出来.想必,以后你们工作也遇到做搜索框的活儿. 由于本人没有后端,因此取用一个对象作为本地数据库.而我现在要做的,其实远远比suggest高级,类似IDE的语法提示的东西.当前成品已放到github上. 好了,我们动手吧.首先是结构层,装了FF的同学可以在百度首页查看源码,当输入几个字母时,会动态生成了那些HTML.不过怎么也好,其成就是一个DIV放到

  • JSuggest自动匹配下拉框使用方法(示例代码)

    1.下载jquery-latest.js,JSuggest.js和JSuggest.css JSuggest.js源代码如下 复制代码 代码如下: /*** * Description : JSuggest 下拉提示框*/ function JSuggest(){ // DIV下拉框this.div = null; // DIV下的ulthis.ul = null; // 文本输入框this.input = null; // 当前DIV所选的LI对象this.current_li = null;

  • 有关suggest快速删除后仍然出现下拉列表的bug问题

    写suggest的时候,有时我们快速删除输入框的文字后,但是suggest下拉列表还有出现,导致的原因是因为ajax异步请求造成的. 虽然我们把输入框的内容都删除了,甚至做了停止后续请求的相关操作,但是由于ajax是异步的,即使你停止了后续的操作,但是最后一次请求的数据还在回来的路上. 解决办法看代码: var inp = document.getElementById('inp'), timer = 0; inp.oninput = function (e) { var val = e.tar

  • Google Suggest ;-) 基于js的动态下拉菜单

    Google Suggest ;-) 基于js的动态下拉菜单

    基本的原理是在当前窗口创建了一个iframe,然后将相关关键词的提示列表在iframe中,并通过列表点选将选定项放到搜索框中.能这么快的能将所有相关关键词的检索数列出,看来所有的提示词已经提前进行了预搜索和数量记录.试了一下"sex",没有相关检索提示,看来对搜索词进行了严格的色情过滤. 另外:这一动态列表功能也应用在GMail的地址栏自动输入完成中,如图: Google自动完成的源代码如下:// Copyright 2004 and onwards Google Inc. var w

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

    实现: <script type="text/javascript" src="/path/to/SuggestFramework.js"></script> <script type="text/javascript">window.onload = initializeSuggestFramework;</script> 有了上面两句后,每个取了名的文本框会多出五个属性: 1.action 必须

  • suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）

    suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）

    重要的键盘事件: 事件顺序:keydown -> keypress ->keyup 对于输入法开启时: keypress: 这三个事件中最最特别的事件的说,如果巧妙运用可以事半功倍: 1. 首先对于大部分功能键是没有keypress事件的 Caps lock ,shift,alt,ctrl,num lock...庆幸的是enter拥有此事件 2. 对于字母,数字,press返回的keyCode是不可靠的 在IE和webkit 下 返回的是ASCII code firfox下永远返回0 但是 对

  • AJAX实现仿Google Suggest效果

    AJAX实现仿Google Suggest效果

    修复了一些细节代码(支持持续按键事件) *项目名称:AJAX实现类Google Suggest效果*作者:草履虫(也就是蓝色的ecma)*联系:caolvchong@gmail.com*时间:2007-7-7*工具: DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库)*测试平台:Firefox2.0,IE6.0,IE7.0*演示地址:http://finish.3322.org/sugges

  • 仿google搜索提示 SuggestFramework的使用

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

  • asp+ajax仿google搜索提示效果代码

    对于更完整的代码可以参考,这个是支持数据库的版本.经过我们编辑测试.Asp+Ajax仿google搜索提示效果 数据库版需要修改的地方有 复制代码 代码如下: javascript.js var url="ajax.asp"; //后台地址 var time_delayajax=300; //搜索延迟 var time_delayupdown=100; //方向键延迟 obj_div.style.top = (xtop + 20) + "px"; //20差不多是输

  • jQuery ajax仿Google自动提示SearchSuggess功能示例

    jQuery ajax仿Google自动提示SearchSuggess功能示例

    本文实例讲述了jQuery ajax仿Google自动提示SearchSuggess功能.分享给大家供大家参考,具体如下: 页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • Jquery模仿Baidu、Google搜索时自动补充搜索结果提示

    好程序就是懒人喜欢的程序.好程序员就是懒人程序员.昨天研究了一下Jquery 模仿Baidu.Google搜索时自动补充搜索结果的提示,感觉效果还行.特意和大家分享一下.所需Jquery插件.请看代码: 复制代码 代码如下: <script type="text/javascript"> $().ready( function () { $(":text").result(auto); function auto(data){ $("#keyW

  • JS实现仿google、百度搜索框输入信息智能提示的实现方法

    本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • jQuery 插件仿百度搜索框智能提示(带Value值)

    因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个. 直接贴代码. 复制代码 代码如下: (function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete = function(config) { c = $(this); var defaults = { width: c.width(), //提示框的宽度 默认跟

  • .Net 文本框实现内容提示的实例代码(仿Google、Baidu)

    1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据库) 复制代码 代码如下: CREATE TABLE Ceshi(   id VARCHAR(50) PRIMARY KEY NOT NULL,   cname VARCHAR(30) )GO INSERT INTO CeshiSELECT NEWID(),'jack1' UNIONSELECT NEWID(),'jack2' UNIONSELECT NEWID(

  • DWR实现模拟Google搜索效果实现原理及代码

    复制代码 代码如下: <!-- 模拟google搜索 --> <script type="text/javascript"> /********************************可配置选项********************************/ // 被选中的相似关键字背景颜色 var selectedBgColor = "#CCCCCC"; // 未被选中的相似关键字背景颜色 var unselectedBgColo

  • jquery 模拟类搜索框自动完成搜索提示功能(改进)

    autopoint.js代码: 复制代码 代码如下: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * Depends: * jquery.js * * function:类似GOOGLE搜索框提示功能 */ (function($) { $.fn.autopoint = function (options) { defaults = { url:options.url, keyLeft : 37,//向左方向键 keyUp : 38,//向上方向键

  • 输入自动提示搜索提示功能的使用说明:sugggestion.txt

    readme: 本文件记录了suggestion.js文件的功能使用说明: 复制代码 代码如下: /* * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度.google搜索框中输入一些字符会以下拉列表形式给出一些提示,提高了用户体验: * 使用技术:JQuery+Ajax * * 一.如何使用该功能? * 1.使用该功能是需引入以下文件: * 1)<link type="text/css" rel="stylesheet" href="

随机推荐