|
|
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è)簡單的檢索姓名的自動完成程序*/
$('#key_name').autocomplete('doctor_list.php',{
/*此處是請求的地址*/
width: 150,
/*此處是自動提示框的寬度*/
matchContains: true,
/*是否使用內(nèi)部比較(匹配單詞的一部分)*/
selectFirst: false,
/*如果這個(gè)設(shè)置為true,第一個(gè)autocomplete值將 被自動通過tab/回車選擇,即使沒有通過鍵盤或鼠標(biāo)精選選擇 */
extraParams: {name:function(){return $("#key_name").val();},action:"getAjaxInfo"}
/*這個(gè)extraParams是后端的附加參數(shù)，以這個(gè)為例，name是請求的地址中的參數(shù)，默認(rèn)是以GET方式，action:"getAjaxInfo"這個(gè)也是GET傳遞的參數(shù)，完整的請求地址如下 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è)自動完成，可以寫簡單一點(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) 。
下面貼出來autocomplate的一些公共用法，從別的站上面粘過來的，參考方便
| 屬性 | 類型 | 描述 | 定義在 |
|---|---|---|---|
| actionPrefix | string | actionsID的前綴. | CWidget |
| attribute | string | 這個(gè)widget相關(guān)的屬性. | CInputWidget |
| autoFill | boolean | 選擇一個(gè)值時(shí)自動填充textinput, 替換已經(jīng)鍵入的或選擇的值. | CAutoComplete |
| cacheLength | integer | 存儲在cache中的后臺查詢結(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提供高級標(biāo)記的Javascript函數(shù). | CAutoComplete |
| formatMatch | string | 用來限制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或如果請求的話生成一個(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 | 是否允許超過一個(gè)autocompleted-value輸入. | CAutoComplete |
| multipleSeparator | string | 當(dāng)使用多個(gè)選項(xiàng)時(shí),選項(xiàng)之間的分隔符. | CAutoComplete |
| mustMatch | boolean | 如果設(shè)置為true,autocompleter將僅僅允許結(jié)果通過后端呈現(xiàn) . | CAutoComplete |
| name | string | input 名稱. | CInputWidget |
| options | array | 傳遞到autocomplete js 對象的構(gòu)造函數(shù)的附加選項(xiàng). | CAutoComplete |
| owner | CBaseController | 返回這個(gè)小物件的所有者/創(chuàng)造者. | CWidget |
| resultsClass | string | 下拉列表的CSS類. | CAutoComplete |
| scroll | boolean | 當(dāng)更多的結(jié)果超過scrollHeight設(shè)置的高度時(shí),是否滾動. | CAutoComplete |
| scrollHeight | integer | autocomplete的舉動高度(用像素)s. | CAutoComplete |
| selectFirst | boolean | 如果這個(gè)設(shè)置為true,第一個(gè)autocomplete值將 被自動通過tab/回車選擇,即使沒有通過鍵盤或鼠標(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 |
php技術(shù)：php中jQuery插件autocomplate的簡單使用筆記，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
