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/suggest/index.htm(短期有效,在本机上,可能访问不顺畅)
*原文地址:http://cceer.xmu.edu.cn/blog/view.asp?id=55(转贴,使用请注明)
*:文件结构:
index.htm:首页,展现效果
ajax_result.asp:ajax调用后台返回结果文件
result.asp:搜索结果文件,这个我并没有做,具体功能根据需求来写
数据库(suggest.mdb):
id:自动编号
keyword:关键字
seachtimes:被搜索次数
matchnum:匹配的文章数目(关于这个方面想了蛮久,如何取得文章数呢,不能是搜索时动态产生,不然在偌大数据库中查询费时费力.那么必然是在后台某个时候去其他的数据库表中添加的,原来想把这方面也做了,但限于算法的不成熟和时间的限制.所以就用了随机数来替换.)
*补充:
和google suggest还有一些差距,比如一直按着方向键问题和其他细节问题,这些都有待改进.
*效果图:
- var j=-1;
- var temp_str;
- var $=function(node){
- return document.getElementById(node);
- }
- var $$=function(node){
- return document.getElementsByTagName(node);
- }
- function ajax_keyword(){
- var xmlhttp;
- try{
- xmlhttp=new XMLHttpRequest();
- }
- catch(e){
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- xmlhttp.onreadystatechange=function(){
- if (xmlhttp.readyState==4){
- if (xmlhttp.status==200){
- var data=xmlhttp.responseText;
- $("suggest").innerHTML=data;
- j=-1;
- }
- }
- }
- xmlhttp.open("post", "ajax_result.asp", true);
- xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
- xmlhttp.send("keyword="+escape($("keyword").value));
- }
- function keydeal(e){
- var keyc;
- if(window.event){
- keyc=e.keyCode;
- }
- else if(e.which){
- keyc=e.which;
- }
- if(keyc!=40 && keyc!=38){
- ajax_keyword();
- temp_str=$("keyword").value;
- }
- if(keyc==40 || keyc==38){
- if(keyc==40){
- if(j<$$("li").length){
- j++;
- if(j>=$$("li").length){
- j=-1;
- }
- }
- if(j>=$$("li").length){
- j=-1;
- }
- }
- if(keyc==38){
- if(j>=0){
- j--;
- if(j<=-1){
- j=$$("li").length;
- }
- }
- else{
- j=$$("li").length-1;
- }
- }
- set_style(j);
- if(j>=0 && j<$$("li").length){
- $("keyword").value=$$("li")[j].childNodes[0].nodeValue;
- }
- else{
- $("keyword").value=temp_str;
- }
- }
- }
- function set_style(num){
- for(var i=0;i<$$("li").length;i++){
- var li_node=$$("li");
- li_node.className="";
- }
- if(j>=0 && j<$$("li").length){
- var i_node=$$("li")[j];
- $$("li")[j].className="select";
- }
- }
- function mo(nodevalue){
- j=nodevalue;
- set_style(j);
- }
- function form_submit(){
- if(j>=0 && j<$$("li").length){
- $$("input")[0].value=$$("li")[j].childNodes[0].nodeValue;
- }
- document.search.submit();
- }
- function hide_suggest(){
- var nodes=document.body.childNodes
- for(var i=0;i<nodes.length;i++){
- if(nodes!=$("keyword")){
- $("suggest").innerHTML="";
- }
- }
- }
AJAX实现仿Google Suggest效果的更多相关文章
- PHP实现仿Google分页效果的分页函数
本文实例讲述了PHP实现仿Google分页效果的分页函数.分享给大家供大家参考.具体如下: /** * 分页函数 * @param int $total 总页数 * @param int $pages ...
- 仿Google首页搜索自动补全
仿Google自动补全,实现细节: 后台是简单的servlet(其实就是负责后台处理数据交互的,没必要非跌用个struts...什么的) 传输介质:xml 使用jQuery js框架 功能实现: 如果 ...
- LoadRunner测试Google Suggest
Google的搜索框是典型的AJAX应用,用户在输入关键字的同时,前端页面通过xmlhttp与后台服务器动态交互,根据用户输入的关键字查找匹配的内容,向用户提示建议的搜索项,也就是所谓的“google ...
- C#仿google日历asp.net简单三层版本
网上搜了很多xgcalendar的例子都是Php开发的,而且官方站上的asp.net/MVC版 在vs10 08 都报错. 所以自己重新用三层写了一下希望对大家有帮助 废话不多说了 先看看它都有些什么 ...
- Android仿IOS回弹效果 ScrollView回弹 总结
Android仿IOS回弹效果 ScrollView回弹 总结 应项目中的需求 须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些 发现总 ...
- .Net 文本框实现内容提示(仿Google、Baidu)
原文:.Net 文本框实现内容提示(仿Google.Baidu) 1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据 ...
- 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果
wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...
- EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射(一) c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象
EF+LINQ事物处理 在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...
- 一款CSS3仿Google Play的垂直菜单
之前分享过一款非常酷的CSS3垂直下拉动画菜单,是多级菜单.今天我们来看一款也是用CSS3制作的垂直菜单,是仿Google Play的菜单,菜单项都带有可爱的小图标,可以先来看看效果图: 当然你可以在 ...
随机推荐
- DevExpress GridControl 部分用法
1.GridControl赋值:this.GridControl1.DataSouce=dt; 2.GridContro总合计及分组合计: 常规总合计直接RunDesigner-Group Summa ...
- 改用二进制启动Moses translation model提示Can't read ~/working/binarised-model/reordering-table
解决方案: 换成 /home/用户名/working 貌似就好使了...但是时间还是估计太长,明早挂机一天试试,顺便把manual 的详细部分看了
- System V共享内存区
要点 shell查看命令:ipcs -m 主要函数 #include <sys/shm.h> //oflag=IPC_CREAT|IPC_EXCL|0644组合 //创建一个内存共享区 i ...
- 掌握这两个技术点,你可以玩转AppCan前端开发
“AppCan的前端开发其实非常简单,只要掌握两方面的技术即可.一方面是会使用栅格布局完成UI的界面排版,另外一方面就是使用AppCan MVVM模型来完成整个页面构造和用户操作逻辑.” 在2016A ...
- hdu 1427 速算24点
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1427 速算24点 Description 速算24点相信绝大多数人都玩过.就是随机给你四张牌,包括A( ...
- UIScrowView swift
// // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...
- mysql安装/启动报错汇总
2016/9/6补充 初始化报错: # /usr/local/mysql/scripts/mysql_install_db --user=mysql --basedir=/usr/local/mysq ...
- Windows Phone 8 实现列表触底加载
[背景] 很多时候在做WP开发的过程中会遇到数据需要分页获取,根据微软官方的推荐方式,建议实现为Market中类似的体验,即滑动到列表的底部的时候加载更多的数据. 这一需求在早起WP7.1时代实现起来 ...
- JQuery 对 Select option 的操作---转载
<select id="selectID" > <option value="1">1</option> <optio ...
- xml之基础了解
1.简介 1>什么XML语言(eXtensible Markup Language) 可扩展标记语言XML是SGML的子集,其目标是允许普通的SGML在Web上以目前HTML的方式被服务.接受和 ...