首頁 > 開發者 > JavaScript
在很多需要搜尋的網站, 都會有一個自動完成的搜尋方塊. 方便使用者尋找他們想要的搜尋字詞. 協助使用者快速找到自己想要的結果. 這種方式是比較友好的. 所以是比較提倡使用的.
先給大家展示下效果圖：
實現這個功能需要服務端配合。用戶端通過指令碼來展示從服務端取得的資料。
先看用戶端的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 class="autocomplete"></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實現搜尋方塊的自動完成功能(一)，希望對大家有所協助！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
