我們在瀏覽各大網站的時候，包括百度、淘寶、京東、雅虎等等網站，當我們輸入一個單詞或者文字的時候，下面會有一行行待選項供我們選擇，很多的公司在做網站的時候也會考慮到這塊，那麼我們今天就簡單的說一下實現的思路，簡單的把代碼寫一下！
首先我們看一下做好的例子和我畫的流程圖以便於大家理解這塊！
首先是完成的例子：
流程圖：
PS：源碼不是我寫的，我只是有這個需求，就找了一下源碼根據自己的需求改了一下，源碼出自一個博友的博客，他的源碼寫的也很詳細，大家感興趣可以去搜一下！
下面我們簡單的看一下代碼：
H5源碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.search
{
left: 0;
position: relative;
}
#auto_div
{
display: none;
width: 300px;
border: 1px #74c0f9 solid;
background: #FFF;
position: absolute;
top: 24px;
left: 0;
color: #323232;
}
</style>
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/testcode.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//(這裏是可以直接請求接口取到數據，就和直接調用一個testcode.js是一樣的)
var test_list = test_list;
var old_value = "";
var highlightindex = -1; //高亮
//自動完成
function AutoComplete(auto, search, mylist) {
if ($("#" + search).val() != old_value || old_value == "") {
var autoNode = $("#" + auto); //緩存對象（彈出框）
var carlist = new Array();
var n = 0;
old_value = $("#" + search).val();
for (i in mylist) {
if (mylist[i].indexOf(old_value) >= 0) {
carlist[n++] = mylist[i];
}
}
if (carlist.length == 0) {
autoNode.hide();
return;
}
autoNode.empty(); //清空上次的記錄
for (i in carlist) {
/* 控制一下顯示的個數 */
if(i>5){
return;
}
var wordNode = carlist[i]; //彈出框裏的每一條內容
var newDivNode = $("<div>").attr("id", i); //設置每個節點的id值
newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");
newDivNode.html(wordNode).appendTo(autoNode); //追加到彈出框
//鼠標移入高亮，移開不高亮
newDivNode.mouseover(function () {
if (highlightindex != -1) { //原來高亮的節點要取消高亮（是-1就不需要了）
autoNode.children("div").eq(highlightindex).css("background-color", "white");
}
//記錄新的高亮節點索引
highlightindex = $(this).attr("id");
$(this).css("background-color", "#ebebeb");
});
newDivNode.mouseout(function () {
$(this).css("background-color", "white");
});
//鼠標點擊文字上屏
newDivNode.click(function () {
//取出高亮節點的文本內容
var comText = autoNode.hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的內容變成高亮節點的內容
$("#" + search).val(comText);
})
if (carlist.length > 0) { //如果返回值有內容就顯示出來
autoNode.show();
} else { //服務器端無內容返回 那麼隱藏彈出框
autoNode.hide();
//彈出框隱藏的同時，高亮節點索引值也變成-1
highlightindex = -1;
}
}
}
//點擊頁面隱藏自動補全提示框
document.onclick = function (e) {
var e = e ? e : window.event;
var tar = e.srcElement || e.target;
if (tar.id != search) {
if ($("#" + auto).is(":visible")) {
$("#" + auto).css("display", "none")
}
}
}
}
$(function () {
old_value = $("#search_text").val();
$("#search_text").focus(function () {
if ($("#search_text").val() == "") {
AutoComplete("auto_div", "search_text", test_list);
}
});
$("#search_text").keyup(function () {
AutoComplete("auto_div", "search_text", test_list);
});
});
/* 搜索的函數 */
function _serchfun(){
var search_text = $("#search_text").val();
/* 執行ajax調用接口，接口實現的功能是完成搜索和將數據存儲到備選的數據庫裏面 */
}
</script>
</head>
<body>
<div class="search">
<input type="text" id="search_text" />
<div id="auto_div">
</div>
<input type="button" value="搜索" onclick="_serchfun"/>
</div>
</body>
</html>
js源碼：
/*
aim：數據預備
author：clearlove
date：2018-7-19
declare：這裏是一個預備的數據，可以根據用戶輸入的習慣和記錄將改js更新，然後將數據倒序排列，這樣每一次顯示的就是用戶之前最後輸入的數據可以實現一個比較智能的效果，
每一次用戶點擊輸入框的時候觸發的是ajax調用的接口，然後每一次用戶輸入結束以後確認搜索的東西才觸發存儲的函數
*/
var test_list = ["手機", "智能手機", "諾基亞", "天宇", "金立", "小米", "小辣椒", "美圖", "威圖", "三星", "洗衣機", "榨汁機", "智能設備", "小愛音響"];
解釋一下里面幾個需要注意的地方
第一：一般的話我們是需要搜索數據庫裏面所有關於用戶輸入的字段的信息的，但是用戶沒有輸入的時候我們是默認顯示5條或者更多的。
第二：有很多的網站做法是相關推薦，舉個例子，用戶輸入手機的時候，裏面會出現很多關於手機的信息和品牌，這種做法的話我這個流程圖就已經滿足不了了，等到有需求的時候我會寫一個解決方案的！
第三：其實所謂的智能也不過是拿到數據數據根據用戶輸入的信息來分析可能出現的文字，這個呢有幾個問題，第一就是用戶多的時候是不是需要每一個用戶一個類似的數據庫出來，第二就是當用戶輸入的數據過少的時候我們根據什麼推送可能出現的信息？
以上就是大概的一些信息，裏面有我不明白的地方，也有寫的詳細的地方，具體的代碼我不習慣解釋，因爲註釋寫的很明白，還有就是如果實在是不知道代碼怎麼走的可以直接函數斷點就行了！希望大神可以指點迷津，裏面我不明白的地方已經寫出來了，有思路的可以下方評論，或者是私信我都是可以的！
這是我的名片，有想法的可以私信我：
