js--搜索框提示仿百度

客官°小女子只卖身不卖艺 2022-04-17 04:19 334阅读 0赞

大概要实现的内容  
  
这是一个很简单的示例，服务器端只是用了一个jsp页面，返回的类型为xml。先讲下是怎么回事，就是在浏览器端，通过ajax请求，发送一串英文字母，服务器端通过比较，返回具有相同前缀的英文单词。就这么个意思。  
  
工程是在IntelliJ IDE中完成的。做前端开发感觉用IntelliJ比较方便，因为对于写javascript的话，有函数名的提示。  
  
本例提供下载。望各位提出宝贵意见哈。  
  
  
一、客户端JSP页面  
  
  
Html代码 收藏代码  
  
<%--  
Created by IntelliJ IDEA.  
User: JayChang  
Date: 2010-11-22  
Time: 8:33:11  
To change this template use File | Settings | File Templates.  
\--%>  
<%@ page contentType="text/html;charset=UTF-8" language="java" %>  
<html>  
<head><title>AutoComplete-Sample</title>  
<link type="text/css" rel="stylesheet" href="./css/default.css">  
<script type="text/javascript" src="./jslib/jquery-1.4.2.js"></script>  
<script type="text/javascript" language="javascript">  
//高亮的索引  
var highLightIndex = -1;  
//超时的标识（对用户连续快速按下键盘的事件做延时处理，只对用户在500ms内最后一次请求，让其生效）  
var timeoutId;  
$(document).ready(function()\{  
init();  
$('\#auto\_txt').bind('keyup',processKeyup);  
\});  
  
/\*\*  
\* 处理键盘按下后弹起的事件  
\* @param event  
\*/  
function processKeyup(event)\{  
var myEvent = event || windows.event;  
var keyCode = myEvent.keyCode;  
//输入是字母，或者退格键则需要重新请求  
if((keyCode >= 65 && keyCode <= 90) || keyCode ==\{  
//以下两行代码是为了防止用户快速输入导致频繁请求服务器  
//这样便可以在用户500ms内快速输入的情况下，只请求服务器一次  
//大大提高服务器性能  
highLightIndex = -1;  
clearTimeout(timeoutId);  
timeoutId = setTimeout(processAjaxRequest,500);  
//处理上下键(up,down)  
\}else if(keyCode == 38 || keyCode == 40)\{  
processKeyUpAndDown(keyCode);  
//按下了回车键  
\}else if(keyCode == 13)\{  
processEnter();  
\}  
\}  
  
/\*\*\*  
\* 初始化弹出框列表的位置，大小  
\*/  
function init()\{  
$('\#auto\_div').hide();  
var pos = $('\#auto\_txt').position();  
var topPosition = pos.top+$('\#auto\_txt').height()+7;  
var leftPosition = pos.left;  
$('\#auto\_div').offset(\{top:topPosition,left:leftPosition\});  
$('\#auto\_div').width($('\#auto\_txt').width());  
//$('\#auto\_div').css('position','absolute');  
\}  
  
/\*\*  
\* 处理Ajax请求  
\* @param data  
\*/  
function processAjaxRequest()\{  
$.ajax(\{  
type:"post", //http请求方法,默认:"post"  
url:"data.jsp", //发送请求的地址  
data:"reqWord="+$('\#auto\_txt').val(),  
dataType:"xml", //预期服务器返回的数据类型  
success:processAjaxResponse  
\});  
\}  
  
/\*\*  
\* 处理Ajax回复  
\* @param data Ajax请求得到的返回结果为dom文档对象  
\*/  
function processAjaxResponse(data)\{  
$('\#auto\_div').html('').show();  
var xml = $(data);  
var words = xml.find('word');  
for(var i = 0 ; i < words.length ; i ++)\{  
var word\_div = $('<div></div>');  
word\_div.html(words.eq(i).text());  
word\_div.hover(fnOver,fnOut);  
word\_div.click(getAutoText);  
$('\#auto\_div').append(word\_div);  
\}  
\}  
  
/\*\*  
\* 处理鼠标滑过  
\*/  
function fnOver()\{  
//alert($(this));  
changeToWhite();  
$(this).css('background-color','pink');  
//alert($(this).index());  
highLightIndex = $(this).index();  
//下面一行注释掉了，百度搜索也没这功能，就是鼠标移动时，跟着改变搜索框的内容  
//$('\#auto\_txt').val($('\#auto\_div').children().eq(highLightIndex).html());  
\}  
  
/\*\*  
\* 处理鼠标移除  
\*/  
function fnOut()\{  
$(this).css('background-color','white');  
\}  
  
/\*\*  
\* 得到自动填充文本  
\*/  
function getAutoText()\{  
//有高亮显示的则选中当前选中当前高亮的文本  
if(highLightIndex != -1)\{  
$('\#auto\_txt').val($(this).html());  
$('\#auto\_div').html('').hide();  
\}  
\}  
  
/\*\*  
\* 处理按下Enter键  
\* @param keyCode  
\*/  
function processEnter()\{  
if(highLightIndex != -1)\{  
$('auto\_txt').val($('\#auto\_div').children().eq(highLightIndex).html());  
$('\#auto\_div').html('').hide();  
\}  
\}  
  
/\*\*  
\* 处理按上下键的情况  
\*/  
function processKeyUpAndDown(keyCode)\{  
var words = $('\#auto\_div').children();  
var num = words.length;  
if(num <= 0) return;  
changeToWhite();  
highLightIndex = ((keyCode != 38 ? num + 1:num - 1)+highLightIndex) % num;  
words.eq(highLightIndex).css('background-color','pink');  
$('\#auto\_txt').val(words.eq(highLightIndex).html());  
\}  
  
/\*\*  
\* 如果有高亮的则把高亮变白  
\*/  
function changeToWhite()\{  
if(highLightIndex != -1)\{  
$('\#auto\_div').children().eq(highLightIndex).css('background-color','white');  
\}  
\}  
</script>  
</head>  
<body>  
自动完成示例 <input type="text" id="auto\_txt"><input type="button" value="提交">  
<div style="border-width:1px;" id="auto\_div"></div>  
</body>  
</html>  
  
二、作为服务器端的JSP，返回的是XML  
  
这里稍作解释，为了方便起见，在服务器端只是很简单的处理，返回有相同前缀的英文单词。没有对空格等复杂的搜索条件作处理，本例主要还是侧重于浏览器端的JavaScript。  
  
  
Html代码 收藏代码  
  
<%--  
Created by IntelliJ IDEA.  
User: JayChang  
Date: 2010-11-22  
Time: 8:33:22  
To change this template use File | Settings | File Templates.  
\--%>  
<%@page contentType="text/xml; charset=UTF-8"%>  
<%  
String reqWord = request.getParameter("reqWord");  
System.out.println(reqWord);  
%>  
<words>  
<%if("absolute".startsWith(reqWord))\{%>  
<word>absolute</word>  
<%\}%>  
<%if("air".startsWith(reqWord))\{%>  
<word>air</word>  
<%\}%>  
<%if("apple".startsWith(reqWord))\{%>  
<word>apple</word>  
<%\}%>  
<%if("amaze".startsWith(reqWord))\{%>  
<word>amaze</word>  
<%\}%>  
<%if("bat".startsWith(reqWord))\{%>  
<word>bat</word>  
<%\}%>  
<%if("bicycle".startsWith(reqWord))\{%>  
<word>bicycle</word>  
<%\}%>  
<%if("bite".startsWith(reqWord))\{%>  
<word>bite</word>  
<%\}%>  
<%if("bottle".startsWith(reqWord))\{%>  
<word>bottle</word>  
<%\}%>  
<%if("cat".startsWith(reqWord))\{%>  
<word>cat</word>  
<%\}%>  
<%if("carry".startsWith(reqWord))\{%>  
<word>carry</word>  
<%\}%>  
<%if("castle".startsWith(reqWord))\{%>  
<word>castle</word>  
<%\}%>  
</words>  
  
三、CSS样式  
  
  
Html代码 收藏代码  
  
\#auto\_div\{  
position:absolute;  
border-width:1px;  
border:1px \#808080 solid;  
\}  
  
  
【by:http://jaychang.iteye.com/blog/823893】