首先來說岗宣，由于作者剛接觸網(wǎng)站的開發(fā)淋样，這篇文章寫得有點亂习蓬，主要是記錄給自己看的，怕以后忘記了，方便到時候查閱企巢，若給您帶來了不便浪规，還請見諒。若有什么建議誉裆，請留言缸濒。非常感謝庇配。
--------------------------------------------步入正題--------------------------------------------
問題（目標）：目標樣式如圖1所示，當在文本框中輸入字符時耀鸦，實時進行提示相關(guān)信息啸澡，供用戶參考和選擇嗅虏。
分析：那么這個功能該如何實現(xiàn)呢旋恼，jQuery提供了一個插件autocomplete可以根據(jù)用戶輸入值進行搜索和過濾奄容，讓用戶快速找到并從預設(shè)值列表中選擇产徊。
**What should we do ? **
How to do it ?
首先：下載jQuery和jQuery UI的包
jQuery 下載地址：http://jquery.com/download/
jQuery UI 下載地址： http://jqueryui.com/download/ 舟铜，在下載jQuery UI 時要注意谆刨，最后一步選擇的是主題類型。如圖2所示刁岸。
將下載下來的庫文件（作者以本機為例） jquery-3.2.1.min.js 虹曙、jquery-ui.min.js 番舆、jquery-ui.css 放到你要寫的 html 文件同一個文件夾中或者你能找到的路徑下。
第一種：靜態(tài)數(shù)據(jù)顯示 ??? 源碼下載
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.min.css"> <!-- 此處根據(jù)你自己的路徑進行設(shè)置 -->
<script src="jquery-3.2.1.min.js"></script> <!-- 此處根據(jù)你自己的路徑進行設(shè)置 -->
<script src="jquery-ui.min.js"></script> <!-- 此處根據(jù)你自己的路徑進行設(shè)置 -->
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input type="text" id="tags">
</div>
</body>
</html>
效果如圖3所示。注意這個下拉框的顏色是由你所選擇的jQuery UI 的主題決定的返奉。
第二種：動態(tài)數(shù)據(jù)顯示
通過ajax實時訪問后臺數(shù)據(jù)庫衡瓶，獲取數(shù)據(jù)后顯示在提示框內(nèi)哮针。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(function () {
$("#tags").autocomplete({
source: "/ceshi/", //請求后臺坦袍，具體的URL根據(jù)你的實際情況進行設(shè)置
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input type="text" id="tags">
</div>
</body>
</html>
推薦文章1：http://www.runoob.com/jqueryui/example-autocomplete.html主要在于比較全面捂齐，若當你出現(xiàn)需要滾動條、寬度設(shè)置等等問題的時候包颁，可以在里面查找相應(yīng)的例子進行copy娩嚼，本文主要是起一個記錄和啟發(fā)的作用。
推薦文章2：http://blog.csdn.net/qililong88/article/details/51941641看他里面的ajax部分
最后講述一個問題
將例1定義的數(shù)組中添加幾個中文元素以及部分帶空格的元素佃迄，可以發(fā)現(xiàn)贵少，當我們在利用中文輸入法尚未完成輸入就已經(jīng)顯示了一部分查詢結(jié)果滔灶，如圖4所示。
var availableTags = [
"面向 對象",
"面向過程",
"How are you!",
"Hello world!",
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
通過分析，我們可以看到萄涯，在我們輸入中文的時候默認就有一個空格顯示在輸入框中涝影，所以查詢匹配的都是帶有空格的元素争占。
解決的辦法：
- 在后臺進行判斷臂痕，若輸入的是空格，則丟棄姆怪，不進行查詢
- 設(shè)置最小匹配長度澡绩，
minLength為2，即當至少輸入2個字符才進行匹配溪掀。
代碼如下 ??? 源碼下載
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.min.css"> <!-- 此處根據(jù)你自己的路徑進行設(shè)置 -->
<script src="jquery-3.2.1.min.js"></script> <!-- 此處根據(jù)你自己的路徑進行設(shè)置 -->
<script src="jquery-ui.min.js"></script> <!-- 此處根據(jù)你自己的路徑進行設(shè)置 -->
<script>
$(function() {
var availableTags = [
"面向 對象",
"面向過程",
"How are you!",
"Hello world!",
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags,
minLength: 2
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input type="text" id="tags">
</div>
</body>
</html>
附
該文章于2017年8月16日于CSDN上首次發(fā)表揪胃，2017年12月24日搬家至此喊递！
