寫在前面
今天周六，我又來分享知識啦。最近一直在忙項目，所以趁著這個周末，喝著咖啡，聽著音樂，敲著代碼就把做項目的知識點總結給大家，簡直不要太愜意，哈哈。
先從我做的功能界面開始說起：
本篇主要介紹的就是圖中紅框標記的搜索自動匹配功能。仔細想一想，有木有很熟悉，對，這功能其實就是跟你每天百度、谷歌這樣的搜索功能一樣。所以下面我會分享一些知識點并寫個例子來實現這樣的功能。
每天都用到的搜索自動匹配功能
百度的搜索框(默認顯示四條數據)
美團搜索框
美團.jpg
淘寶搜索框
首先，大概過程肯定是這樣的：先從輸入框中輸入關鍵字，然后根據關鍵字在緩存或數據庫取數據返回顯示在下方區域。
重點知識匯總
要實現此功能，JQuery+ajax是必備。這個功能需要服務端配合。客戶端通過ajax從服務端取得的數據。下面，我寫個簡書搜索自動匹配的例子，數據是事先定義好在腳本里的，當然，如果我有訪問簡書數據庫的權限和賬號密碼，就可以動態的獲取實時數據了。
開始之前，先給大家普及一下例子中用到的重點知識。
知識點一
keydown(function(e){}
這個keydown函數是當按下按鍵時觸發事件，比如改變文本域的顏色。
比如這段代碼：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>當發生 keydown 和 keyup 事件時，輸入域會改變顏色。請試著在其中輸入內容。</p>
</body>
</html>
變量e表示發生擊鍵事件，尋找是哪個鍵被按下，要使用which這個屬性。
知識點二
var keycode = e.which ? e.which : e.keyCode;
這句代碼是為了兼容瀏覽器按鍵事件對象的按鍵碼屬性， 如IE中，只有keyCode屬性，而FireFox中有which和charCode屬性，Opera中有keyCode和which屬性等。
知識點三
if(keycode == 38){}
常用按鍵碼與按鍵關系對應表
知識點四
onKeyUp 事件：onkeyup 事件會在鍵盤按鍵被松開時發生。
知識點五
blur() 方法:當失去焦點 (blur) 時觸發事件，比如輸入域失去焦點改變其顏色。
removeClass() 方法:從被選元素移除一個或多個類。
addClass()方法：向被選元素添加一個或多個類。
整體思路及完整代碼：
首先在輸入框上注冊keyup事件，然后在事件中獲取我實現定義的data對象數組(一般實時數據通過ajax獲取json對象）。取得數據后，在下方區域就可以顯示數據了，當我們點擊每一項的時候，就可以響應事件。同時根據索引值來調整背景高亮。
html代碼：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>簡書自動搜索功能例子</title>
<meta name="Author" content="wblearn">
<meta name="Keywords" content="http://www.lxweimin.com/users/48599dc7ef1b/latest_articles">
<meta name="Description" content="簡書自動搜索功能例子">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" media="all" >
<link rel="stylesheet" media="all" >
<link rel="stylesheet" media="all" >
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://cdn-qn0.jianshu.io/assets/modernizr-613ea63b5aa2f0e2a1946e9c28c8eedb.js"></script>
<style type="text/css">
#container{
position:absolute;
left:50%;
top: 40%;
}
#content{
float:left;
position:relative;
right:50%;
}
input{
border:0;
width:288px;
height:30px;
font-size:16px;
padding:0 5px;
line-height:30px;
}
.item{
padding:3px 5px;
cursor:pointer;
}
.addbg{
background:#87A900;
}
.first{
border:solid #87A900 2px;
width:300px;
}
#append{
border:solid #87A900 2px;
border-top:0;
display:none;
}
img {
max-width: 100%;
width: 40px;
height: 40px;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
font{
margin-left: 20px;
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: inherit;
text-rendering: optimizelegibility;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="first"><input id="kw" onKeyup="getContent(this);" /></div>
<div id="append"></div>
</div>
</div>
</body>
</html>
js代碼：
<script type="text/javascript">
var data = [
""+" <font>簡書IT·互聯網專題</font>",
""+" <font>簡書IT·互聯網主編: 向右奔跑</font>",
""+" <font>簡書程序員專題</font>",
""+" <font>簡書程序員主編: 小彤花園</font>",
""+" <font>簡書連載小說專題</font>",
""+" <font>簡書連載小說主編: 一鳴</font>",
""+" <font>簡書詩專題</font>",
""+" <font>簡書詩主編：北海源</font>",
""+" <font>簡書其他專題</font>",
""+" <font>簡書其他主編</font>"
];
$(document).ready(function(){
$(document).keydown(function(e){
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if(keycode == 38){
if(jQuery.trim($("#append").html())==""){
return;
}
movePrev();
}else if(keycode == 40){
if(jQuery.trim($("#append").html())==""){
return;
}
$("#kw").blur();
if($(".item").hasClass("addbg")){
moveNext();
}else{
$(".item").removeClass('addbg').eq(0).addClass('addbg');
}
}else if(keycode == 13){
dojob();
}
});
var movePrev = function(){
$("#kw").blur();
var index = $(".addbg").prevAll().length;
if(index == 0){
$(".item").removeClass('addbg').eq($(".item").length-1).addClass('addbg');
}else{
$(".item").removeClass('addbg').eq(index-1).addClass('addbg');
}
}
var moveNext = function(){
var index = $(".addbg").prevAll().length;
if(index == $(".item").length-1){
$(".item").removeClass('addbg').eq(0).addClass('addbg');
}else{
$(".item").removeClass('addbg').eq(index+1).addClass('addbg');
}
}
var dojob = function(){
$("#kw").blur();
var value = $(".addbg").text();
$("#kw").val(value);
$("#append").hide().html("");
}
});
function getContent(obj){
var kw = jQuery.trim($(obj).val());
if(kw == ""){
$("#append").hide().html("");
return false;
}
var html = "";
for (var i = 0; i < data.length; i++) {
if (data[i].indexOf(kw) >= 0) {
html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i] + "</div>"
}
}
if(html != ""){
$("#append").show().html(html);
}else{
$("#append").hide().html("");
}
}
function getFocus(obj){
$(".item").removeClass("addbg");
$(obj).addClass("addbg");
}
function getCon(obj){
var value = $(obj).text();
$("#kw").val(value);
$("#append").hide().html("");
}
</script>
寫在最后
以上就是我總結分享搜索自動匹配功能的全部內容，當然，界面我還可以做得更美觀，功能可以做的更完善。今天先到這里，下次見(持續更新中......)
