在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的.
先给大家展示下效果图：
实现这个功能需要服务端配合。客户端通过脚本来展示从服务端取得的数据。
先看客户端的html：
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>搜索词自动完成</title>
<style type="text/css">
#search{ text-align: center; position:relative; }
.autocomplete{ border: 1px solid #9accfb; background-color: white; text-align: left; }
.autocomplete li{ list-style-type: none; } .clickable { cursor: default; }
.highlight { background-color: #9accfb; }
</style>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(function(){
//取得div层
var $search = $('#search');
//取得输入框jquery对象
var $searchinput = $search.find('#search-text');
//关闭浏览器提供给输入框的自动完成
$searchinput.attr('autocomplete','off');
//创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置
var $autocomplete = $('<div></div>') .hide() .insertafter('#submit');
//清空下拉列表的内容并且隐藏下拉列表区
var clear = function(){ $autocomplete.empty().hide(); };
//注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
$searchinput.blur(function(){ settimeout(clear,500); });
//下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，想百度搜索那样
var selecteditem = null;
//timeout的id var timeoutid = null;
//设置下拉项的高亮背景
var setselecteditem = function(item){
//更新索引变量 selecteditem = item ;
//按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0
if(selecteditem < 0){
selecteditem = $autocomplete.find('li').length - 1;
}
else if(selecteditem > $autocomplete.find('li').length-1 ) { selecteditem = 0; }
//首先移除其他列表项的高亮背景，然后再高亮当前索引的背景
$autocomplete.find('li').removeclass('highlight') .eq(selecteditem).addclass('highlight'); };
var ajax_request = function(){
//ajax服务端通信 $.ajax({ 'url':'/test/index.jsp',
//服务器的地址 'data':{'search-text':$searchinput.val()},
//参数 'datatype':'json',
//返回数据类型 'type':'post',
//请求类型 'success':function(data){ if(data.length) {
//遍历data，添加到自动完成区 $.each(data, function(index,term) {
//创建li标签,添加到下拉列表中 $('<li></li>').text(term).appendto($autocomplete) .addclass('clickable')
.hover(function(){
//下拉列表每一项的事件，鼠标移进去的操作
$(this).siblings().removeclass('highlight');
$(this).addclass('highlight');
selecteditem = index; },function(){
//下拉列表每一项的事件，鼠标离开的操作 $(this).removeclass('highlight');
//当鼠标离开时索引置-1，当作标记 selecteditem = -1; }) .click(function(){
//鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中 $searchinput.val(term);
//清空并隐藏下拉列表 $autocomplete.empty().hide(); }); });
//事件注册完毕
//设置下拉列表的位置，然后显示下拉列表
var ypos = $searchinput.position().top;
var xpos = $searchinput.position().left;
$autocomplete.css('width',$searchinput.css('width'));
$autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"});
setselecteditem(0);
//显示下拉列表
$autocomplete.show();
}
}
});
};
//对输入框进行事件注册
$searchinput .keyup(function(event) {
//字母数字，退格，空格
if(event.keycode > 40 || event.keycode == 8 || event.keycode ==32) {
//首先删除下拉列表中的信息
$autocomplete.empty().hide();
cleartimeout(timeoutid);
timeoutid = settimeout(ajax_request,100);
}
else if(event.keycode == 38){
//上 //selecteditem = -1 代表鼠标离开
if(selecteditem == -1){
setselecteditem($autocomplete.find('li').length-1);
} else {
//索引减1 setselecteditem(selecteditem - 1);
}
event.preventdefault();
}
else if(event.keycode == 40) {
//下 //selecteditem = -1 代表鼠标离开 if(selecteditem == -1){ setselecteditem(0); }
else {
//索引加1 setselecteditem(selecteditem + 1);
} event.preventdefault();
}
})
.keypress(function(event){ //enter键 if(event.keycode == 13) {
//列表为空或者鼠标离开导致当前没有索引值 if($autocomplete.find('li').length == 0 || selecteditem == -1)
{ return; }
$searchinput.val($autocomplete.find('li').eq(selecteditem).text());
$autocomplete.empty().hide(); event.preventdefault(); } }) .keydown(function(event){
//esc键 if(event.keycode == 27 ) { $autocomplete.empty().hide();
event.preventdefault(); } });
//注册窗口大小改变的事件，重新调整下拉列表的位置
$(window).resize(function() {
var ypos = $searchinput.position().top;
var xpos = $searchinput.position().left;
$autocomplete.css('width',$searchinput.css('width'));
$autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"});
});
});
</script>
</head>
<body>
<div id = "search">
<label for="search-text">请输入关键词</label>
<input type="text" id="search-text" name="search-text" />
<input type="button" id="submit" value="搜索"/>
</div>
</body>
</html>
服务端的代码，我们这里选择jsp，也可以使用php，服务端无所谓，关键是传送数据。
代码如下:
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<%
string []words = {"amani","abc","apple","abstract","an","bike","byebye",
"beat","be","bing","come","cup","class","calendar","china"};
if(request.getparameter("search-text") != null) {
string key = request.getparameter("search-text");
if(key.length() != 0){
string json="[";
for(int i = 0; i < words.length; i++) {
if(words[i].startswith(key)){
json += "\""+ words[i] + "\"" + ",";
}
}
json = json.substring(0,json.length()-1>0?json.length()-1:1);
json += "]";
system.out.println("json:" + json);
out.println(json);
}
}
%>
整个过程思路其实挺清晰的，首先在输入框上注册keyup事件，然后在事件中通过ajax获取json对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当我们点击每一项的时候，就可以响应事件。键盘导航的关键是记录当前高亮的索引值，根据索引值来调整背景高亮。显示下拉列表的位置要根据输入框的位置来设置，当浏览器的大小改变时，随时调整下拉列表的位置。
以上所述是小编给大家介绍的javascript实现搜索框的自动完成功能(一)。