刚入职的时候公司主管曾经让我用Cool Auto-Suggest 插件写事后台管理页面内的自动填充及搜索功能。
其实这个插件的使用很简单，网上也有相应的翻译文档，可是明显的机翻看着没法忍受。我写一下使用方法，方便不喜欢看英文文档的新手。javascript
原文见：http://w3shaman.com/article/jquery-cool-auto-suggest
插件下载地址：https://github.com/w3shaman/jquery-coolautosuggestphp
首先，你须要在你的前端页面中引入插件。css
<!-- 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" />
而后，在你须要使用插件的地方定义一个输入框html
<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>
关于上述代码的配置项说明：java
若是showThumbnail选项设置为true，插件将在每一个建议项目上显示图像缩略图；
若是showDescription选项设置为true，插件将在每一个建议项目上显示说明文字；
若是submitOnSelect选项设置为true，若是你点击了建议项目，表单将被自动提交。mysql
同时，插件也支持回调函数。使用方法以下：jquery
<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>
直接看代码，说明会在注释里给出git
<?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);
?>
几个关键点在于：github
基本上使用插件是用不着修改它的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便可解决。
找到插件源代码的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"
});
在后台代码中能够在须要传递的数组中添加一个content字段，其中用以保存须要传递到前端的其余数据，例如须要自动填充的表单数据，这样在触发onSelect事件后能够将页面中的表单自动填充。
具体的自动填充代码不就不放了，有兴趣的话不妨研究一下jQuery而后写一个自动填充的插件。固然你也能够直接使用easyUI框架或者借鉴它的写法。
若是每次输入一个字符都要向数据库进行请求会形成数据库资源无谓的消耗。并且在字符较少的时候查询所得的数据量也太过于庞大，几乎起不到提示的做用。 所以我的建议在前端为输入框绑定一个keyup事件，当输入的字符达到必定的数量后再发起对数据库的查询。注意使用undelegate()等事件方法删除输入框绑定的coolautosuggest方法，不然在第一次查询结束后删除全部字符，检查字符数量的方法就会失效。