简单实例 复制代代码如下: < ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">< html xmlns="http://www.w3.org/1999/xhtml">AutocompleteOption <br>$(document).ready(function(){ <br> /* 初開始化データベースソース */<br> var key = ["jsp", "javascript", "jquery", "asp", "asp.net", "php",]; <p> $('#searchBox').autocomplete({<br> source :keys,<br> minLength : 2<br> });<br>});<br> <br>body{padding:30px; }<br>< ;/html> 効果図:上記代コード中、页面初期化時候将页面上の入力パッケージ化jQueryオブジェクトは、次に autocomplete() メソッドを使用して、そのパッケージを自動完了コンポーネントに設定すると同時に、その最小処理長の選択とデータソースの選択を初期化します2: 自動完了コンポーネントのメソッド 検索、開く、フォーカス、選択、閉じる、変更イベント 复制代代码如下: function(event, ui) { //event: イベント発生時のイベント对オブジェクト //ui, 是用户界面对,ui.item はラベルと値のプロパティを含むオブジェクト } 复制代代码如下: AutocompleteEvent< ;script type="text/javascript" src="JS/jquery.ui.core.js">< script type="text/javascript" src="JS/jquery.ui.autocomplete.js"><br>$(ドキュメント) .ready(function(){<br> /*<br> 初期化データソース<br> */<br> var key = ["c ", "c#", "c",<br> "java", " j2ee」、「jsp」、「javascript」、「jquery」、<br> 「asp」、「asp.net」、<br> 「ruby」、「vb.net」、「visual Basic」、「vb」、 <br> "フォト ショップ", "php",<br> "flax", "フラッシュ"];<br> function GetValues(key){<br> var ks = [];<br><br> if( key == "") return ks; //如果关键字は空字符串、一空集合<br><br> for(var i = 0; i<keys.length i> if(keys[i].indexOf(key) == 0){<br> ks[ks.length] = key[i];<br> } <br> }<br> return ks;<br> }<br><br> $('#searchBox' ).autocomplete({<br> source : [],<br> search : function(event,ui){<br> $('#searchBox').autocomplete(<br> "option","source",GetValues ($(this).val())<br> );<br> }<br> });<br>});<br><br>body {padding-top:30px;}<br>td{ text-align:center;垂直配置:中央;パディング:10px;}<br>#searchBox,#Search{ パディング:2px; font-size:15px;}<br>#searchBox{width:220px;height:17px;}<br>#Search{width:80px;}<br> マイ検索エンジン 検索 效果图: