基于jquery實(shí)現(xiàn)的類(lèi)似百度搜索的輸入框自動(dòng)完成功能
更新時(shí)間：2011年08月23日 22:26:09 作者：
自動(dòng)完成功能是指：類(lèi)似百度搜索之類(lèi)的輸入一個(gè)詞的一部分后就自動(dòng)提示，然后用戶(hù)可以選擇，不需要再輸入剩余部分。
廢話不多說(shuō)，直觀的看一下：
<!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>搜索詞自動(dòng)完成</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對(duì)象
var $searchInput = $search.find('#search-text');
//關(guān)閉瀏覽器提供給輸入框的自動(dòng)完成
$searchInput.attr('autocomplete','off');
//創(chuàng)建自動(dòng)完成的下拉列表，用于顯示服務(wù)器返回的數(shù)據(jù),插入在搜索按鈕的后面，等顯示的時(shí)候再調(diào)整位置
var $autocomplete = $('<div class="autocomplete"></div>')
.hide()
.insertAfter('#submit');
//清空下拉列表的內(nèi)容并且隱藏下拉列表區(qū)
var clear = function(){
$autocomplete.empty().hide();
};
//注冊(cè)事件，當(dāng)輸入框失去焦點(diǎn)的時(shí)候清空下拉列表并隱藏
$searchInput.blur(function(){
setTimeout(clear,500);
});
//下拉列表中高亮的項(xiàng)目的索引，當(dāng)顯示下拉列表項(xiàng)的時(shí)候，移動(dòng)鼠標(biāo)或者鍵盤(pán)的上下鍵就會(huì)移動(dòng)高亮的項(xiàng)目，想百度搜索那樣
var selectedItem = null;
//timeout的ID
var timeoutid = null;
//設(shè)置下拉項(xiàng)的高亮背景
var setSelectedItem = function(item){
//更新索引變量
selectedItem = item ;
//按上下鍵是循環(huán)顯示的，小于0就置成最大的值，大于最大值就置成0
if(selectedItem < 0){
selectedItem = $autocomplete.find('li').length - 1;
}
else if(selectedItem > $autocomplete.find('li').length-1 ) {
selectedItem = 0;
}
//首先移除其他列表項(xiàng)的高亮背景，然后再高亮當(dāng)前索引的背景
$autocomplete.find('li').removeClass('highlight')
.eq(selectedItem).addClass('highlight');
};
var ajax_request = function(){
//ajax服務(wù)端通信
$.ajax({
'url':'/test/index.jsp', //服務(wù)器的地址
'data':{'search-text':$searchInput.val()}, //參數(shù)
'dataType':'json', //返回?cái)?shù)據(jù)類(lèi)型
'type':'POST', //請(qǐng)求類(lèi)型
'success':function(data){
if(data.length) {
//遍歷data，添加到自動(dòng)完成區(qū)
$.each(data, function(index,term) {
//創(chuàng)建li標(biāo)簽,添加到下拉列表中
$('<li></li>').text(term).appendTo($autocomplete)
.addClass('clickable')
.hover(function(){
//下拉列表每一項(xiàng)的事件，鼠標(biāo)移進(jìn)去的操作
$(this).siblings().removeClass('highlight');
$(this).addClass('highlight');
selectedItem = index;
},function(){
//下拉列表每一項(xiàng)的事件，鼠標(biāo)離開(kāi)的操作
$(this).removeClass('highlight');
//當(dāng)鼠標(biāo)離開(kāi)時(shí)索引置-1，當(dāng)作標(biāo)記
selectedItem = -1;
})
.click(function(){
//鼠標(biāo)單擊下拉列表的這一項(xiàng)的話，就將這一項(xiàng)的值添加到輸入框中
$searchInput.val(term);
//清空并隱藏下拉列表
$autocomplete.empty().hide();
});
});//事件注冊(cè)完畢
//設(shè)置下拉列表的位置，然后顯示下拉列表
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();
}
}
});
};
//對(duì)輸入框進(jìn)行事件注冊(cè)
$searchInput
.keyup(function(event) {
//字母數(shù)字，退格，空格
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 代表鼠標(biāo)離開(kāi)
if(selectedItem == -1){
setSelectedItem($autocomplete.find('li').length-1);
}
else {
//索引減1
setSelectedItem(selectedItem - 1);
}
event.preventDefault();
}
else if(event.keyCode == 40) {
//下
//selectedItem = -1 代表鼠標(biāo)離開(kāi)
if(selectedItem == -1){
setSelectedItem(0);
}
else {
//索引加1
setSelectedItem(selectedItem + 1);
}
event.preventDefault();
}
})
.keypress(function(event){
//enter鍵
if(event.keyCode == 13) {
//列表為空或者鼠標(biāo)離開(kāi)導(dǎo)致當(dāng)前沒(méi)有索引值
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();
}
});
//注冊(cè)窗口大小改變的事件，重新調(diào)整下拉列表的位置
$(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">請(qǐng)輸入關(guān)鍵詞</label><input type="text" id="search-text" name="search-text" />
<input type="button" id="submit" value="搜索"/>
</div>
</body>
</html>
服務(wù)端的代碼，我們這里選擇JSP，也可以使用PHP，服務(wù)端無(wú)所謂，關(guān)鍵是傳送數(shù)據(jù)。
<%@ 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);
}
}
%>
整個(gè)過(guò)程思路其實(shí)挺清晰的，首先在輸入框上注冊(cè)keyup事件，然后在事件中通過(guò)ajax獲取json對(duì)象。取得數(shù)據(jù)后，每一項(xiàng)數(shù)據(jù)創(chuàng)建一個(gè)li標(biāo)簽，在標(biāo)簽上注冊(cè)click事件，這樣當(dāng)我們點(diǎn)擊每一項(xiàng)的時(shí)候，就可以響應(yīng)事件。鍵盤(pán)導(dǎo)航的關(guān)鍵是記錄當(dāng)前高亮的索引值，根據(jù)索引值來(lái)調(diào)整背景高亮。顯示下拉列表的位置要根據(jù)輸入框的位置來(lái)設(shè)置，當(dāng)瀏覽器的大小改變時(shí)，隨時(shí)調(diào)整下拉列表的位置。
JQuery是web前端的利器，有機(jī)會(huì)的話，大家一定要看一下。
實(shí)現(xiàn)這個(gè)功能需要服務(wù)端配合?？蛻?hù)端通過(guò)腳本來(lái)展示從服務(wù)端取得的數(shù)據(jù)。
先看客戶(hù)端的HTML：
復(fù)制代碼 代碼如下:
<!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>搜索詞自動(dòng)完成</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對(duì)象
var $searchInput = $search.find('#search-text');
//關(guān)閉瀏覽器提供給輸入框的自動(dòng)完成
$searchInput.attr('autocomplete','off');
//創(chuàng)建自動(dòng)完成的下拉列表，用于顯示服務(wù)器返回的數(shù)據(jù),插入在搜索按鈕的后面，等顯示的時(shí)候再調(diào)整位置
var $autocomplete = $('<div class="autocomplete"></div>')
.hide()
.insertAfter('#submit');
//清空下拉列表的內(nèi)容并且隱藏下拉列表區(qū)
var clear = function(){
$autocomplete.empty().hide();
};
//注冊(cè)事件，當(dāng)輸入框失去焦點(diǎn)的時(shí)候清空下拉列表并隱藏
$searchInput.blur(function(){
setTimeout(clear,500);
});
//下拉列表中高亮的項(xiàng)目的索引，當(dāng)顯示下拉列表項(xiàng)的時(shí)候，移動(dòng)鼠標(biāo)或者鍵盤(pán)的上下鍵就會(huì)移動(dòng)高亮的項(xiàng)目，想百度搜索那樣
var selectedItem = null;
//timeout的ID
var timeoutid = null;
//設(shè)置下拉項(xiàng)的高亮背景
var setSelectedItem = function(item){
//更新索引變量
selectedItem = item ;
//按上下鍵是循環(huán)顯示的，小于0就置成最大的值，大于最大值就置成0
if(selectedItem < 0){
selectedItem = $autocomplete.find('li').length - 1;
}
else if(selectedItem > $autocomplete.find('li').length-1 ) {
selectedItem = 0;
}
//首先移除其他列表項(xiàng)的高亮背景，然后再高亮當(dāng)前索引的背景
$autocomplete.find('li').removeClass('highlight')
.eq(selectedItem).addClass('highlight');
};
var ajax_request = function(){
//ajax服務(wù)端通信
$.ajax({
'url':'/test/index.jsp', //服務(wù)器的地址
'data':{'search-text':$searchInput.val()}, //參數(shù)
'dataType':'json', //返回?cái)?shù)據(jù)類(lèi)型
'type':'POST', //請(qǐng)求類(lèi)型
'success':function(data){
if(data.length) {
//遍歷data，添加到自動(dòng)完成區(qū)
$.each(data, function(index,term) {
//創(chuàng)建li標(biāo)簽,添加到下拉列表中
$('<li></li>').text(term).appendTo($autocomplete)
.addClass('clickable')
.hover(function(){
//下拉列表每一項(xiàng)的事件，鼠標(biāo)移進(jìn)去的操作
$(this).siblings().removeClass('highlight');
$(this).addClass('highlight');
selectedItem = index;
},function(){
//下拉列表每一項(xiàng)的事件，鼠標(biāo)離開(kāi)的操作
$(this).removeClass('highlight');
//當(dāng)鼠標(biāo)離開(kāi)時(shí)索引置-1，當(dāng)作標(biāo)記
selectedItem = -1;
})
.click(function(){
//鼠標(biāo)單擊下拉列表的這一項(xiàng)的話，就將這一項(xiàng)的值添加到輸入框中
$searchInput.val(term);
//清空并隱藏下拉列表
$autocomplete.empty().hide();
});
});//事件注冊(cè)完畢
//設(shè)置下拉列表的位置，然后顯示下拉列表
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();
}
}
});
};
//對(duì)輸入框進(jìn)行事件注冊(cè)
$searchInput
.keyup(function(event) {
//字母數(shù)字，退格，空格
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 代表鼠標(biāo)離開(kāi)
if(selectedItem == -1){
setSelectedItem($autocomplete.find('li').length-1);
}
else {
//索引減1
setSelectedItem(selectedItem - 1);
}
event.preventDefault();
}
else if(event.keyCode == 40) {
//下
//selectedItem = -1 代表鼠標(biāo)離開(kāi)
if(selectedItem == -1){
setSelectedItem(0);
}
else {
//索引加1
setSelectedItem(selectedItem + 1);
}
event.preventDefault();
}
})
.keypress(function(event){
//enter鍵
if(event.keyCode == 13) {
//列表為空或者鼠標(biāo)離開(kāi)導(dǎo)致當(dāng)前沒(méi)有索引值
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();
}
});
//注冊(cè)窗口大小改變的事件，重新調(diào)整下拉列表的位置
$(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">請(qǐng)輸入關(guān)鍵詞</label><input type="text" id="search-text" name="search-text" />
<input type="button" id="submit" value="搜索"/>
</div>
</body>
</html>
服務(wù)端的代碼，我們這里選擇JSP，也可以使用PHP，服務(wù)端無(wú)所謂，關(guān)鍵是傳送數(shù)據(jù)。
復(fù)制代碼 代碼如下:
<%@ 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);
}
}
%>
整個(gè)過(guò)程思路其實(shí)挺清晰的，首先在輸入框上注冊(cè)keyup事件，然后在事件中通過(guò)ajax獲取json對(duì)象。取得數(shù)據(jù)后，每一項(xiàng)數(shù)據(jù)創(chuàng)建一個(gè)li標(biāo)簽，在標(biāo)簽上注冊(cè)click事件，這樣當(dāng)我們點(diǎn)擊每一項(xiàng)的時(shí)候，就可以響應(yīng)事件。鍵盤(pán)導(dǎo)航的關(guān)鍵是記錄當(dāng)前高亮的索引值，根據(jù)索引值來(lái)調(diào)整背景高亮。顯示下拉列表的位置要根據(jù)輸入框的位置來(lái)設(shè)置，當(dāng)瀏覽器的大小改變時(shí)，隨時(shí)調(diào)整下拉列表的位置。
JQuery是web前端的利器，有機(jī)會(huì)的話，大家一定要看一下。
相關(guān)文章
淺析jquery如何判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件
jquery如何判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件？下面小編就為大家?guī)?lái)一篇jquery判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件方法。希望對(duì)大家有所幫助，一起跟隨小編過(guò)來(lái)看看吧2016-04-04
JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
今天下午整理文件上傳的例子，感覺(jué)收集到的例子都很不人性話，后來(lái)找到一個(gè)還可以的，本來(lái)想改成類(lèi)似于騰訊QQ相冊(cè)那種方式，仔細(xì)看了一下是Flash的, 而且那個(gè)極速上傳插件也不知道用什么做的？問(wèn)了一下，說(shuō)是什么cgi. 搞得一頭霧水2010-01-01
JQuery DataTable刪除行后的頁(yè)面更新利用Ajax解決
使用Jquery的DataTable進(jìn)行數(shù)據(jù)表處理非常方便，常遇到的一個(gè)問(wèn)題就是刪除一行后頁(yè)面必須進(jìn)行更新，下面與大家分享下使用Ajax的解決方法2013-05-05
jQuery學(xué)習(xí)之DOM節(jié)點(diǎn)的插入方法總結(jié)
這篇文章主要給大家介紹了jQuery中DOM節(jié)點(diǎn)的插入方法，文章總結(jié)的很全面，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們一起來(lái)看看吧。2017-01-01
jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)（生成樹(shù)）
本篇文章主要介紹了jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)（生成樹(shù)），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航分享
下面給大家分享7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航讓用戶(hù)方便地找到想要的信息，而且更讓人有一種特殊的用戶(hù)體驗(yàn)，希望大家會(huì)喜歡2013-04-04
這篇文章主要介紹了jQuery中on()方法用法,實(shí)例分析了on()方法的功能及各種常見(jiàn)的使用技巧,并對(duì)比分析了與bind(),live(),delegate()等方法的區(qū)別,需要的朋友可以參考下2015-02-02
本篇文章主要是對(duì)jquery選擇器之屬性過(guò)濾選擇器進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
jquery結(jié)合html實(shí)現(xiàn)中英文頁(yè)面切換
這篇文章主要為大家詳細(xì)介紹了jquery結(jié)合html實(shí)現(xiàn)中英文頁(yè)面切換,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
each() 方法規(guī)定為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)。這篇文章主要給大家介紹jQuery中each方法的使用詳解，需要的朋友參考下吧2018-03-03