生活随笔
收集整理的這篇文章主要介紹了
jquery自动补全
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. 頁面加載就獲取??然后用戶輸入匹配提前加載的數(shù)據(jù)
2.根據(jù)用戶輸入到數(shù)據(jù)庫查找匹配的數(shù)據(jù) 顯示上來
前三個(gè)框都是屬于第一種
最后一個(gè)框模擬 百度 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()});//數(shù)據(jù)庫$("#tags4").autocomplete({source: function( request, response ) {var name=$.ui.autocomplete.escapeRegex( request.term );response( $.grep( DataSouce2(name), function( item ){return item;}) );}});//利用ajax頁面加載就獲取到數(shù)據(jù)源function DataSouce1(){var mycars=new Array()for (var i = 0; i <100; i++) {mycars[i]="高"+i;};return mycars;}//利用ajax根據(jù)輸入的到數(shù)據(jù)庫查找 相當(dāng)于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>
總結(jié)
以上是生活随笔為你收集整理的jquery自动补全的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
