生活随笔
收集整理的這篇文章主要介紹了
jquery自动补全
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 頁面加載就獲取??然后用戶輸入匹配提前加載的數據
2.根據用戶輸入到數據庫查找匹配的數據 顯示上來
前三個框都是屬于第一種
最后一個框模擬 百度 google
<!doctype html><html lang="en">
<head><meta charset="utf-8" /><title>jQuery UI Autocomplete - Default functionality</title><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css" /><script>$(function() {var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL高","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Per高l","PHP","Python","Ruby","Scala","Sche高"];$( "#tags1" ).autocomplete({source: availableTags});$("#tags2").autocomplete({source: ["a", "b", "c"]});//頁面加載$("#tags3").autocomplete({source: DataSouce1()});//數據庫$("#tags4").autocomplete({source: function( request, response ) {var name=$.ui.autocomplete.escapeRegex( request.term );response( $.grep( DataSouce2(name), function( item ){return item;}) );}});//利用ajax頁面加載就獲取到數據源function DataSouce1(){var mycars=new Array()for (var i = 0; i <100; i++) {mycars[i]="高"+i;};return mycars;}//利用ajax根據輸入的到數據庫查找 相當于function DataSouce2(name){var mycars=new Array()for (var i = 0; i <100; i++) {mycars[i]=name+"_"+i;};return mycars;}});
</script>
</head>
<body><div class="ui-widget"><label for="tags">Tags: </label><input id="tags1" /><input id="tags2" /><input id="tags3" /><input id="tags4" /></div>
</body>
</html>
總結
以上是生活随笔為你收集整理的jquery自动补全的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
