jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub實現(xiàn)股票的輸入關(guān)鍵字自動補全股票信息進行搜索功能,原先用jQuery-ui,結(jié)果jQuery-ui庫太大,所以考慮用其他插件,最終選擇使用autocomplete.js,控件簡單用著方便。留下記錄
源碼如下:
?
?
<!doctype html>
<html lang="en-US">
<head>
? <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
? <title>Input Autocomplete Suggestions Demo</title>
? <link rel="stylesheet" type="text/css" media="all" href="style.css">
? <script type="text/javascript" src="js/codedata.js"></script>
? <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
? <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
? <script type="text/javascript" src="js/currency-autocomplete.js"></script>
</head>
<body>
? <div id="w">
??? <div id="content">
????? <h1>World Currencies Autocomplete Search</h1>
????? <p>Just start typing and results will be supplied from the JavaScript. Check out <a href="https://github.com/devbridge/jQuery-Autocomplete">jQuery Autocomplete</a> on Github.</a></p>
???? ?
????? <div id="searchfield">
??????? <form><input type="text" name="currency" class="biginput" id="autocomplete"></form>
????? </div><!-- @end #searchfield -->
???? ?
????? <div id="outputbox">
??????? <p id="outputcontent">Choose a currency and the results will display here.</p>
????? </div>
??? </div><!-- @end #content -->
? </div><!-- @end #w -->
</body>
</html>
?
?
具體源碼地址?? https://github.com/longma8586/jQueryAutoCompleteDemo
轉(zhuǎn)載于:https://www.cnblogs.com/longma8586/p/8807647.html
總結(jié)
以上是生活随笔為你收集整理的jQuery搜索框自动补全功能插件实现-autocomplete.js的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 去泰国,机票来回多少钱
- 下一篇: 中年人好听的微信网名