php中jQuery插件autocomplate的簡(jiǎn)單使用筆記

更新時(shí)間：2012年06月14日 23:07:10 作者：

剛接觸jQuery，時(shí)間不太長(zhǎng)，以下文章只限于參考使用。查了一部分資料，最后終于寫成功了，只是單純的實(shí)現(xiàn)，其它的特殊用法還沒(méi)有進(jìn)行深入研究，簡(jiǎn)單貼出來(lái)，希望可以給新手一個(gè)參考

首先需要的文件有jquery.js，jquery.autocomplete.js，jquery.autocomplete.js，這三個(gè)文件，哪里有？百度、谷歌都可以找到?？梢匀ス倬W(wǎng)上下，里面包含了一些demo，只留下這三個(gè)文件即可。

js代碼：

復(fù)制代碼代碼如下:

 
<SCRIPT language=javascript src="../../js/jquery.js" type=text/javascript> 
</SCRIPT><SCRIPT language=javascript src="../../js/jquery.autocomplete.js" type=text/javascript></SCRIPT> 
<SCRIPT language=javascript type=text/javascript> 
$(document).ready(function(){ 
/*這里做的是一個(gè)簡(jiǎn)單的檢索姓名的自動(dòng)完成程序*/ 
$('#key_name').autocomplete('doctor_list.php',{ 
/*此處是請(qǐng)求的地址*/ 
width: 150, 
/*此處是自動(dòng)提示框的寬度*/ 
matchContains: true, 
/*是否使用內(nèi)部比較(匹配單詞的一部分)*/ 
selectFirst: false, 
/*如果這個(gè)設(shè)置為true,第一個(gè)autocomplete值將 被自動(dòng)通過(guò)tab/回車選擇,即使沒(méi)有通過(guò)鍵盤或鼠標(biāo)精選選擇 */ 
extraParams: {name:function(){return $("#key_name").val();},action:"getAjaxInfo"} 
/*這個(gè)extraParams是后端的附加參數(shù)，以這個(gè)為例，name是請(qǐng)求的地址中的參數(shù)，默認(rèn)是以GET方式，action:"getAjaxInfo"這個(gè)也是GET傳遞的參數(shù)，完整的請(qǐng)求地址如下 doctor_list.php?action=getAjaxInfo&name=表單數(shù)據(jù)了*/ 
}); 
</SCRIPT> 

HTML代碼中只有：
<input id="key_name" style="width: 150px;" type="text" name="key_name" />

下面是php代碼：

復(fù)制代碼代碼如下:

 
if($_GET['action'] == 'getAjaxInfo'){ 
//這里由于我寫其它應(yīng)用了，如果單純做這一個(gè)自動(dòng)完成，可以寫簡(jiǎn)單一點(diǎn) 
if($_GET['name'] != ''){ 
$field = 'name'; 
} 
if($field != ''){ 
$val = $_GET['$field']; 
$sql = "select `$field` from doctor_info where $field like '%$val%'"; 
$rst = $aa->execute($sql); 
while($row = mysql_fetch_array($rst)){ 
echo $row[0]."\n"; 
} 
} 
exit; 
} 

直接運(yùn)行即可實(shí)現(xiàn) 。
下面貼出來(lái)autocomplate的一些公共用法，從別的站上面粘過(guò)來(lái)的，參考方便

屬性	類型	描述	定義在
actionPrefix	string	actionsID的前綴.	CWidget
attribute	string	這個(gè)widget相關(guān)的屬性.	CInputWidget
autoFill	boolean	選擇一個(gè)值時(shí)自動(dòng)填充textinput, 替換已經(jīng)鍵入的或選擇的值.	CAutoComplete
cacheLength	integer	存儲(chǔ)在cache中的后臺(tái)查詢結(jié)果的數(shù)目.	CAutoComplete
controller	CController	返回這個(gè)小物件所屬的controller.	CWidget
cssFile	mixed	這個(gè)widget使用的CSS文件.	CAutoComplete
data	array	保存在客戶端提供候選選擇項(xiàng)的數(shù)據(jù).	CAutoComplete
delay	integer	當(dāng)鍵入后,autocompleter等待多少毫秒激活 .	CAutoComplete
extraParams	array	后端的附加參數(shù).	CAutoComplete
formatItem	string	為一個(gè)item提供高級(jí)標(biāo)記的javascript函數(shù).	CAutoComplete
formatMatch	string	用來(lái)限制autocomplete搜索匹配的數(shù)據(jù)的javascript函數(shù) .	CAutoComplete
formatResult	string	在結(jié)果放入input字段前,提供格式化值的javascript函數(shù) .	CAutoComplete
highlight	boolean\|string	是否在選擇框中高亮匹配.	CAutoComplete
htmlOptions	array	被渲染到input tag的附加HTML選項(xiàng).	CInputWidget
id	string	返回本小物件(widget)的ID或如果請(qǐng)求的話生成一個(gè)新的.	CWidget
inputClass	string	input元素的CSS類.	CAutoComplete
loadingClass	string	當(dāng)數(shù)據(jù)從后端載入時(shí)使用的CSS類.	CAutoComplete
matchCase	boolean	是否比較時(shí)大小寫敏感.	CAutoComplete
matchContains	boolean	是否使用內(nèi)部比較(匹配單詞的一部分) (i.	CAutoComplete
matchSubset	boolean	是否autocompleter為更多的指定查詢使用緩存 .	CAutoComplete
max	integer	select box的item數(shù)目.	CAutoComplete
methodChain	string	被附加到autocomplete構(gòu)造函數(shù)后的方法鏈調(diào)用.	CAutoComplete
minChars	integer	用戶必須鍵入的最少字符數(shù) 在autocompleter激活之前.	CAutoComplete
model	CModel	這個(gè)widget相關(guān)的數(shù)據(jù)模型.	CInputWidget
multiple	boolean	是否允許超過(guò)一個(gè)autocompleted-value輸入.	CAutoComplete
multipleSeparator	string	當(dāng)使用多個(gè)選項(xiàng)時(shí),選項(xiàng)之間的分隔符.	CAutoComplete
mustMatch	boolean	如果設(shè)置為true,autocompleter將僅僅允許結(jié)果通過(guò)后端呈現(xiàn) .	CAutoComplete
name	string	input 名稱.	CInputWidget
options	array	傳遞到autocomplete js 對(duì)象的構(gòu)造函數(shù)的附加選項(xiàng).	CAutoComplete
owner	CBaseController	返回這個(gè)小物件的所有者/創(chuàng)造者.	CWidget
resultsClass	string	下拉列表的CSS類.	CAutoComplete
scroll	boolean	當(dāng)更多的結(jié)果超過(guò)scrollHeight設(shè)置的高度時(shí),是否滾動(dòng).	CAutoComplete
scrollHeight	integer	autocomplete的舉動(dòng)高度(用像素)s.	CAutoComplete
selectFirst	boolean	如果這個(gè)設(shè)置為true,第一個(gè)autocomplete值將被自動(dòng)通過(guò)tab/回車選擇,即使沒(méi)有通過(guò)鍵盤或鼠標(biāo)精選選擇 .	CAutoComplete
skin	mixed	這個(gè)widget使用的皮膚名稱.	CWidget
textArea	boolean	是否使用一個(gè)text area顯示autocomplete.	CAutoComplete
url	string\|array	返回候選選項(xiàng)的URL.	CAutoComplete
value	string	input值	CInputWidget
viewPath	string	返回這個(gè)物件包含視圖文件的目錄.	CWidget
width	integer	指定select box的自定義寬度.	CAutoComplete