首先需要的文件有jquery.js，jquery.autocomplete.js，jquery.autocomplete.js，這三個文件，哪裡有？百度、谷歌都可以找到。可以去官網上下，裡面包含了一些demo，只留下這三個文件即可。
js代碼：
復制代碼 代碼如下:
<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(){
/*這裡做的是一個簡單的檢索姓名的自動完成程序*/
$('#key_name').autocomplete('doctor_list.php',{
/*此處是請求的地址*/
width: 150,
/*此處是自動提示框的寬度*/
matchContains: true,
/*是否使用內部比較(匹配單詞的一部分)*/
selectFirst: false,
/*如果這個設置為true,第一個autocomplete值將 被自動通過tab/回車選擇,即使沒有通過鍵盤或鼠標精選選擇 */
extraParams: {name:function(){return $("#key_name").val();},action:"getAjaxInfo"}
/*這個extraParams是後端的附加參數，以這個為例，name是請求的地址中的參數，默認是以GET方式，action:"getAjaxInfo"這個也是GET傳遞的參數，完整的請求地址如下 doctor_list.php?action=getAjaxInfo&name=表單數據了*/
});
</SCRIPT>
HTML代碼中只有：
<input id="key_name" style="width: 150px;" type="text" name="key_name" />
下面是php代碼：
復制代碼 代碼如下:
if($_GET['action'] == 'getAjaxInfo'){
//這裡由於我寫其它應用了，如果單純做這一個自動完成，可以寫簡單一點
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;
}
直接運行即可實現 。
下面貼出來autocomplate的一些公共用法，從別的站上面粘過來的，參考方便
屬性 |
類型 |
描述 |
定義在 |
actionPrefix
string
actionsID的前綴.
CWidget
attribute
string
這個widget相關的屬性.
CInputWidget
autoFill
boolean
選擇一個值時自動填充textinput, 替換已經鍵入的或選擇的值.
CAutoComplete
cacheLength
integer
存儲在cache中的後台查詢結果的數目.
CAutoComplete
controller
CController
返回這個小物件所屬的controller.
CWidget
cssFile
mixed
這個widget使用的CSS文件.
CAutoComplete
data
array
保存在客戶端提供候選選擇項的數據.
CAutoComplete
delay
integer
當鍵入後,autocompleter等待多少毫秒激活 .
CAutoComplete
extraParams
array
後端的附加參數.
CAutoComplete
formatItem
string
為一個item提供高級標記的javascript函數.
CAutoComplete
formatMatch
string
用來限制autocomplete搜索匹配的數據的javascript函數 .
CAutoComplete
formatResult
string
在結果放入input字段前,提供格式化值的javascript函數 .
CAutoComplete
highlight
boolean|string
是否在選擇框中高亮匹配.
CAutoComplete
htmlOptions
array
被渲染到input tag的附加HTML選項.
CInputWidget
id
string
返回本小物件(widget)的ID或如果請求的話生成一個新的.
CWidget
inputClass
string
input元素的CSS類.
CAutoComplete
loadingClass
string
當數據從後端載入時使用的CSS類.
CAutoComplete
matchCase
boolean
是否比較時大小寫敏感.
CAutoComplete
matchContains
boolean
是否使用內部比較(匹配單詞的一部分) (i.
CAutoComplete
matchSubset
boolean
是否autocompleter為更多的指定查詢使用緩存 .
CAutoComplete
max
integer
select box的item數目.
CAutoComplete
methodChain
string
被附加到autocomplete構造函數後的方法鏈調用.
CAutoComplete
minChars
integer
用戶必須鍵入的最少字符數 在autocompleter激活之前.
CAutoComplete
model
CModel
這個widget相關的數據模型.
CInputWidget
multiple
boolean
是否允許超過一個autocompleted-value輸入.
CAutoComplete
multipleSeparator
string
當使用多個選項時,選項之間的分隔符.
CAutoComplete
mustMatch
boolean
如果設置為true,autocompleter將僅僅允許結果通過後端呈現 .
CAutoComplete
name
string
input 名稱.
CInputWidget
options
array
傳遞到autocomplete js 對象的構造函數的附加選項.
CAutoComplete
owner
CBaseController
返回這個小物件的所有者/創造者.
CWidget
resultsClass
string
下拉列表的CSS類.
CAutoComplete
scroll
boolean
當更多的結果超過scrollHeight設置的高度時,是否滾動.
CAutoComplete
scrollHeight
integer
autocomplete的舉動高度(用像素)s.
CAutoComplete
selectFirst
boolean
如果這個設置為true,第一個autocomplete值將 被自動通過tab/回車選擇,即使沒有通過鍵盤或鼠標精選選擇 .
CAutoComplete
skin
mixed
這個widget使用的皮膚名稱.
CWidget
textArea
boolean
是否使用一個text area顯示autocomplete.
CAutoComplete
url
string|array
返回候選選項的URL.
CAutoComplete
value
string
input值
CInputWidget
viewPath
string
返回這個物件包含視圖文件的目錄.
CWidget
width
integer
指定select box的自定義寬度.
CAutoComplete
