刚入职的时候公司主管曾经让我用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方法,否则在第一次查询结束后删除所有字符,检查字符数量的方法就会失效。

Cool Auto-Suggest 插件使用方法的更多相关文章

  1. Sublime Text插件安装方法和常用插件

    插件安装方法: 1.打开Sublime Text,按下Ctrl+Shift+P调出命令面板 ; 2.输入install 调出 Install Package Control选项并回车; 3.再次按下C ...

  2. sublime text3的一些插件安装方法和使用

    sublime text部分插件使用方法在线安装package Control的方法:    ctrl+~ 输入如下代码:        import urllib2,os; pf='Package ...

  3. 安装Sublime Text 3插件的方法

    直接安装 安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 使用Package Contr ...

  4. eclipse svn插件安装方法

    eclipse svn插件安装方法 使用dropins安装插件 从Eclipse3.5开始,安装目录下就多了一个dropins目录.只要将插件解压后拖到该目录即可安装插件.比如安装svn插件subcl ...

  5. Emmet插件使用方法总结

    Emmet插件使用方法总结 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...

  6. 转:myeclipse 8.x 插件安装方法终极总结

    原文地址:http://shaomeng95.iteye.com/blog/945062 最近因为要指导新人顺便整理文档,懒得折腾eclipse,需要装的插件太多,于是乎装myeclipse 8.5吧 ...

  7. sublime text2 用ctags插件实现方法定位

    sublime text2 用ctags插件实现方法定位(转) 我们用sublime几乎都会首先安装这个插件,这个插件是管理插件的功能,先安装它,再安装其他插件就方便了. 点击sublime的菜单栏 ...

  8. Sublime Text 3插件安装方法

    安装Sublime Tex 3t插件的方法: 按快捷键Ctrl + ~ 调出console 粘贴以下代码到console并回车: import urllib.request,os; pf = 'Pac ...

  9. Jquery开发插件的方法

    Jquery未开发插件提供了两个方法: (1)Jquery.extend(object)    -为Jquery类本身添加新的方法;代码如下: $.extend({ add:function(a,b) ...

  10. suggest的使用方法

    suggest的使用方法注意: 1. 要表示汉语的"建议做某事",英语通经常使用suggest doing sth,而不能用 suggest to do sth: 2. " ...

随机推荐

  1. 问答项目---账号密码异步校验后进行PHP校验

    在做登陆的时候,通过异步校验后还需要通过PHP来校验账号和密码的正确性. PHP校验账号密码: public function login(){ if(!IS_POST){echo "页面不 ...

  2. 从零打造在线网盘系统之Hibernate查询与更新技术

    欢迎浏览Java工程师SSH教程从零打造在线网盘系统系列教程,本系列教程将会使用SSH(Struts2+Spring+Hibernate)打造一个在线网盘系统,本系列教程是从零开始,所以会详细以及着重 ...

  3. Grafana+Prometheus监控

    添加模板一定要看说明以及依赖 监控redis https://blog.52itstyle.com/archives/2049/ http://www.cnblogs.com/sfnz/p/65669 ...

  4. Scala数组和集合

    一.scala数组 数组定义1: var arr = new Array[String](3) String:存储的元素类型 3:存储3个元素 添加元素: arr(1) = "hello&q ...

  5. Python开发【Django】:日志记录、API认证

    日志记录: 调用同一个对象,分别记录错误日志和运行日志 自定义日志类: class Logger(object): __instance = None def __init__(self): self ...

  6. 持续交付的Mesos与Docker导入篇

    变革这个词在当今的数字化时代司空见惯,IT技术每过一段时间就会有一起革新,从WEB2.0.虚拟化.云计算.大数据.微架构.DevOps再到今天的容器Docker与Mesos. Docker的出现方便了 ...

  7. rpyc

    import json import socket from thread import * from ansible_api import * from rpyc import Service fr ...

  8. python sort、sorted高级排序技巧(转)

    add by zhj: 没找到原文.可以按多个维度进行排序,而且可以指定他们的排序方向,如果维度都是数字,排序比较容易,用+/-号就可以 指定排序方向.否则,就调用多次sorted进行排序了,而且要按 ...

  9. 8.Git撤销修改

    有一个文件内容如下: $ cat README.md the first ... the second ... the third ... - 文件自修改后还没有被放到暂存区,现在,撤销修改就回到和版 ...

  10. Logback配置讲解

    复制文件并粘贴到项目下: logback.xml: <?xml version="1.0" encoding="UTF-8"?> <confi ...