先給大家展示下效果圖：
實現(xiàn)這個功能需要服務(wù)端配合?？蛻舳送ㄟ^腳本來展示從服務(wù)端取得的數(shù)據(jù)。
先看客戶端的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');
//關(guān)閉瀏覽器提供給輸入框的自動完成
$searchInput.attr('autocomplete','off');
//創(chuàng)建自動完成的下拉列表，用于顯示服務(wù)器返回的數(shù)據(jù),插入在搜索按鈕的后面，等顯示的時候再調(diào)整位置
var $autocomplete = $('<div></div>') .hide() .insertAfter('#submit');
//清空下拉列表的內(nèi)容并且隱藏下拉列表區(qū)
var clear = function(){ $autocomplete.empty().hide(); };
//注冊事件，當(dāng)輸入框失去焦點的時候清空下拉列表并隱藏
$searchInput.blur(function(){ setTimeout(clear,500); });
//下拉列表中高亮的項目的索引，當(dāng)顯示下拉列表項的時候，移動鼠標(biāo)或者鍵盤的上下鍵就會移動高亮的項目，想百度搜索那樣
var selectedItem = null;
//timeout的ID var timeoutid = null;
//設(shè)置下拉項的高亮背景
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; }
//首先移除其他列表項的高亮背景，然后再高亮當(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',
//返回數(shù)據(jù)類型 'type':'POST',
//請求類型 'success':function(data){ if(data.length) {
//遍歷data，添加到自動完成區(qū) $.each(data, function(index,term) {
//創(chuàng)建li標(biāo)簽,添加到下拉列表中 $('<li></li>').text(term).appendTo($autocomplete) .addClass('clickable')
.hover(function(){
//下拉列表每一項的事件，鼠標(biāo)移進(jìn)去的操作
$(this).siblings().removeClass('highlight');
$(this).addClass('highlight');
selectedItem = index; },function(){
//下拉列表每一項的事件，鼠標(biāo)離開的操作 $(this).removeClass('highlight');
//當(dāng)鼠標(biāo)離開時索引置-1，當(dāng)作標(biāo)記 selectedItem = -1; }) .click(function(){
//鼠標(biāo)單擊下拉列表的這一項的話，就將這一項的值添加到輸入框中 $searchInput.val(term);
//清空并隱藏下拉列表 $autocomplete.empty().hide(); }); });
//事件注冊完畢
//設(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();
}
}
});
};
//對輸入框進(jìn)行事件注冊
$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)離開
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)離開 if(selectedItem == -1){ setSelectedItem(0); }
else {
//索引加1 setSelectedItem(selectedItem + 1);
} event.preventDefault();
}
})
.keypress(function(event){ //enter鍵 if(event.keyCode == 13) {
//列表為空或者鼠標(biāo)離開導(dǎo)致當(dāng)前沒有索引值 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(); } });
//注冊窗口大小改變的事件，重新調(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">請輸入關(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ù)端無所謂，關(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);
}
}
%>整個過程思路其實挺清晰的，首先在輸入框上注冊keyup事件，然后在事件中通過ajax獲取json對象。取得數(shù)據(jù)后，每一項數(shù)據(jù)創(chuàng)建一個li標(biāo)簽，在標(biāo)簽上注冊click事件，這樣當(dāng)我們點擊每一項的時候，就可以響應(yīng)事件。鍵盤導(dǎo)航的關(guān)鍵是記錄當(dāng)前高亮的索引值，根據(jù)索引值來調(diào)整背景高亮。顯示下拉列表的位置要根據(jù)輸入框的位置來設(shè)置，當(dāng)瀏覽器的大小改變時，隨時調(diào)整下拉列表的位置。
以上所述是小編給大家介紹的JavaScript實現(xiàn)搜索框的自動完成功能(一)，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)（www.gxlcms.com）！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2023 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
