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方法，否则在第一次查询结束后删除所有字符，检查字符数量的方法就会失效。