查看文章 |
『非原创』ajax实现搜索自动提示功能
2008-10-09 12:25
搜索在我们日常网络出行中必不可少,今天我们要说的是我们使用的搜索中的一个小便利提示,就是当我们输入要搜索的关键字时候,搜索文本框能自动出现类似提示功能,说的啰嗦也不明白,直接看google和xunlei的截图吧,我们要实现的就是搜索自动提示功能图示: 发个程序要实现的截图 原理说明: 当用户鼠标定位在搜索框时出发js函数,js函数实时获取当前用户的输入内容异步提交给查询页面,查询页面根据用户的输入关键字检索数据库返回特定的字符串给js函数,js函数分析字符串并显示给用户,显示的过程就是创建一个层,层定位为搜索框下,长度与搜索框等同,高度更具返回的搜索内容确定。所以就提出了下面几个关键内容: 1.创建层 2.提交搜索关键字异步给搜索页面 3.搜索页面根据关键字检索数据库返回特定字符串 4.js函数解析字符串给上面创建的层,这些字符串就是要显示的结果提示 5.层的隐藏和显示 需要注意的是创建层 1:如何更具搜索文本框创建层(层的位置,宽度,高度等) 2:如何保证当搜索框下有下拉选框时层能显示在下拉框上面而不是下面 为了直观说明我们要解决的问题,可以先看我们的效果 search.html 大家可以输入我的博客域名中的字符:x或者w或者q 这里我们显示的是一个提示文字字符,一个是数字,也就是我们的查询结果要返回的字符串内容,如何返回,怎么返回我们在下面说明。我们先给大家解释下我们的效果所要使用到的数据表,也就是根据用户输入的关键字查询的表,根据这个表返回存在的信息。 一:使用的数据库表及字段说明 假如我们的数据库为xqbar,搜索表为suggest,表结构字段为id,title,hits sql语句: CREATE TABLE `xqbar`.`suggest` ( `id` INT NOT NULL AUTO_INCREMENT , `title` VARCHAR( 100 ) NOT NULL , `hits` INT NOT NULL DEFAULT '0', PRIMARY KEY ( `id` ) ) ENGINE = InnoDB 插入数据: insert into suggest(title,hits)values('xqbar.com',100); insert into suggest(title,hits)values('www.xqbar.com',410); insert into suggest(title,hits)values('http://xqbar.com',700); insert into suggest(title,hits)values('mail:xqbar.com',200); insert into suggest(title,hits)values('ftp:xqbar.com',100); insert into suggest(title,hits)values('http://www.xqbar.com',70) 表结构完成 待续。。。 |
最近读者: