仿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

时间: 2024-10-27 20:21:34

仿google搜索提示 SuggestFramework的使用的相关文章

仿google搜索提示 SuggestFramework的使用_AJAX相关

一.首先来看一下什么是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差不多是输入框

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仿淘宝、百度、google 搜索提示功能

本案例采用jquery实现动态搜索显示功能,只要输入值就能立刻动态显示数据,不同于常规查询方法. 模拟效果如下: 1. 2.                          <%@ page language="java" pageencoding="utf-8"%><!doctype html public "-//w3c//dtd html 4.01 transitional//en"><html><

ajax仿google搜索下拉提示

<script type="text/javascript" src="prototype.js"></script><script type="text/javascript"> //定义变量lastindex 表示为鼠标在查询结果上滑动所在位置,初始为-1 var lastindex=-1; //定义变量flag 表示是否根据用户输入的关键字进行ajax查询,flase为允许查询 true为禁止查询 var

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

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

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

  这篇文章主要介绍了JS实现仿google.百度搜索框输入信息智能提示的实现方法,实例分析了javascript实现智能提示功能的技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

标签-仿百度搜索框只能提示上下键移动的功能效果 js+jquery

问题描述 仿百度搜索框只能提示上下键移动的功能效果 js+jquery 搜索结果不能上下移动,只能按一下,按第二下的时候结果只剩下一个了,currentSelIndex总是为0 ,currentSelIndex是记录 标签id的变量. 首先,我输入一个字符,匹配到的结果会在文本框下方显示出来.因为代码都是写在搜索框的onkeyup ()事件中的,每按一下键盘都会触发该事件,当我第一次按(下)键的时候,相应的会把选中的文本赋 给搜索框,所以按第二次的时候又会重新触发该事件,搜索条件变成了第一次按(

Javascript实现类似google搜索框输入提示功能

本文主要内容:p居中.层定位.类google输入提示示例,在线qq查询,自动刷新 类似google搜索框输入提示功能的示例代码,采用层定位,居中对齐,input 的输入改变.失去焦点.获得焦点事件......解决了onblur和onclick同时被调用的失效问题.