Cool Auto-Suggest 插件使用方法

剛入職的時候公司主管曾經讓我用Cool Auto-Suggest 插件寫事後臺管理頁面內的自動填充及搜索功能。
其實這個插件的使用很簡單，網上也有相應的翻譯文檔，可是明顯的機翻看着沒法忍受。我寫一下使用方法，方便不喜歡看英文文檔的新手。

原文見：http://w3shaman.com/article/jquery-cool-auto-suggest
插件下載地址：https://github.com/w3shaman/jquery-coolautosuggest

插件使用前端部分

首先，你須要在你的前端頁面中引入插件。

<!-- jQuery框架的引入 -->
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<!-- 插件的jQuery代碼部分 -->
<script language="javascript" type="text/javascript" src="js/jquery.coolautosuggest.js"></script>
<!-- 插件的樣式部分 -->
<link rel="stylesheet" type="text/css" href="css/jquery.coolautosuggest.css" />

而後，在你須要使用插件的地方定義一個輸入框

<input type="text" id="text1" name="text1" />

最後，初始化自動提示文本框

<script language="javascript" type="text/javascript">
$("#text1").coolautosuggest({
    url:"data.php?chars=",
    showThumbnail:true,
    showDescription:true,
    submitOnSelect:true
});
</script>

關於上述代碼的配置項說明：

若是showThumbnail選項設置爲true，插件將在每一個建議項目上顯示圖像縮略圖；
若是showDescription選項設置爲true，插件將在每一個建議項目上顯示說明文字；
若是submitOnSelect選項設置爲true，若是你點擊了建議項目，表單將被自動提交。

同時，插件也支持回調函數。使用方法以下：

<script language="javascript" type="text/javascript">
$("#text1").coolautosuggest({
    url:"data.php?chars=",
    showThumbnail:true,
    showDescription:true,
    onSelected:function(result){
        // 檢查返回的結果是否爲空
        if(result!=null){
            $("#text1_id").val(result.id); // 獲取數據的ID字段
            $("#text1_description").val(result.description); // 獲取說明文字
        } else {
            $("#text1_id").val(""); // 將ID設爲空
            $("#text1_description").val(""); // 將說明文字設爲空
        }
    }
});
</script>

插件使用後端部分

直接看代碼，說明會在註釋裏給出

<?php
// 頭信息設置
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

// 數據庫鏈接設置
$host="localhost";
$username="test";
$password="";
$database="test";
// 創建數據庫鏈接，選擇數據庫
$con=mysql_connect($host,$username,$password) or die(mysql_error());
mysql_select_db($database,$con) or die(mysql_error());

// 初始化一個空數組用以保存結果
$arr=array();

// 數據庫查詢
// 可使用正則表達式或者MySQL自帶的LIKE關鍵字進行模糊查詢
$result=mysql_query("SELECT * FROM people WHERE name LIKE '%".mysql_real_escape_string($_GET['chars'])."%' ORDER BY name LIMIT 0, 10",$con) or die(mysql_error());
if(mysql_num_rows($result)>0){
    while($data=mysql_fetch_row($result)){
        // 將數據放入數組
        $arr[]=array(
            "id" => $data[0],  // 該行數據的ID，任意，注意惟一性
            "data" => $data[1],  // 所要填寫的數據
            "thumbnail" => 'images/'.$data[3],  // 該行數據的圖標地址
            "description" => $data[2]  // 說明文字
        );
    }
}

// 關閉數據庫鏈接
mysql_close($con);
//將數組編碼成JSON格式，傳給前端
echo json_encode($arr);
?>

幾個關鍵點在於：

1. 須要使用數據庫的模糊查詢技術。若是是MySQL數據庫可使用LIKE關鍵字進行查詢。公司使用的數據庫是MongoDB，通常是初始化一個MongoRegex對象傳給Criteria對象進行查詢。
2. 數組內id字段和data字段是必須的，若是沒有這兩個字段，插件會以alert的形式報錯，很是討厭。關於如何關閉報錯，這個後面會說。
3. 注意將數據編碼成JSON格式。基本上涉及到和前端的JavaScript交互，JSON必定是會用到的。

其餘設置

CSS設置

基本上使用插件是用不着修改它的CSS的，可是若是你考慮到網站的總體美觀，能夠修改一下插件的CSS文件。

/* 自動填充插件樣式表 */
 
/*
爲每一項添加左右的邊框
 | item 1   |
 | item 2   |
*/
.suggestions .suggest_item{
    padding-bottom: 2px;
    padding-top: 2px;
    background-color:#EEEEEE;
    border-left:1px solid #CCCCCC;
    border-right:1px solid #CCCCCC;
}
 
/*
爲第一行數據添加頂部的邊框
------------
   item 1
   ...
*/
.suggestions .suggest_item.first{
    border-top:1px solid #CCCCCC;
}
 
/*
爲最後一行數據添加底部的邊框
   ...
   item 2
  ------------
*/
.suggestions .suggest_item.last{
    border-bottom:1px solid #CCCCCC;
}
 
/*
爲選中的一項填充顏色
*/
.suggestions .suggest_item.selected, .suggestions .suggest_item.selected .description{
    background-color:#999999;
    color:#FFFFFF;
    cursor:pointer;
}
 
/*
每一項的圖標設置
*/
.suggestions .suggest_item .thumbnail{
    background-color: transparent;
    background-position: top center;
    background-repeat: no-repeat;
    margin: 1px 2px 1px 2px;
    float: left;
    width: 50px;
    height: 50px;
}
 
/*
說明
*/
.suggestions .suggest_item .description{
    font-style: italic;
    font-size: 11px;
    color: #777;
}

關閉插件的錯誤提示

插件的錯誤提示儘管不能少，可是由於它是以alert的形式彈出，所以很是惱人。只須要到插件的源代碼裏把錯誤提示改爲console.log形式就行了，這樣就能夠在瀏覽器的控制檯裏看到錯誤提示信息。

找到jquery.coolautosuggest.js文件，在第126行至140的位置，找到如下代碼，一共有兩行

alert('Sorry, an error has occured!');

把alert改爲console.log就能夠了

設置插件提示框的z-index

若是頁面比較複雜的話，插件的提示框就會被其餘的頁面元素遮掉。修改一下插件提示框的z-index便可解決。

找到插件源代碼的186行左右，或者直接搜索z-index，便可快速定位。

將this.holder.css()函數修改成：

this.holder.css({
    "position":"absolute",
    "left":this.textField.position().left + "px",
    "top":this.textField.position().top + this.textField.height() + 5 + "px",
    // 修改這裏！
    "z-index":1000,
    "height":height + "px"
});

我的使用心得

1. 在後臺代碼中能夠在須要傳遞的數組中添加一個content字段，其中用以保存須要傳遞到前端的其餘數據，例如須要自動填充的表單數據，這樣在觸發onSelect事件後能夠將頁面中的表單自動填充。
   具體的自動填充代碼不就不放了，有興趣的話不妨研究一下jQuery而後寫一個自動填充的插件。固然你也能夠直接使用easyUI框架或者借鑑它的寫法。

2. 若是每次輸入一個字符都要向數據庫進行請求會形成數據庫資源無謂的消耗。並且在字符較少的時候查詢所得的數據量也太過於龐大，幾乎起不到提示的做用。 所以我的建議在前端爲輸入框綁定一個keyup事件，當輸入的字符達到必定的數量後再發起對數據庫的查詢。注意使用undelegate()等事件方法刪除輸入框綁定的coolautosuggest方法，不然在第一次查詢結束後刪除全部字符，檢查字符數量的方法就會失效。