首先需要的文件有jquery.js，jquery.autocomplete.js，jquery.autocomplete.js，這三個文件，哪里有？百度、谷歌都可以找到?？梢匀ス倬W上下，里面包含了一些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 |
