技术帮
 

autocomplete插件使用

本网站内容基本都是原创作品,未得到作者同意也欢迎转载
转载请注明出处:技术帮
说你呢,赶紧长按二维码,然后点击识别图中二维码

任何技术难题可进QQ群提问:【小崔说编程
对于提问的原则是:没有你不能问的,只有我不会答的

1472955908895017376.png说两句


使用百度搜索的时候,一个很有趣的操作体验就是当使用者输入若干个字后,百度会自动将相关的搜索关键词显示在下拉选择框中。

blob.png

同样的效果在淘宝也有,当使用者输入某个宝贝的名字的时候,淘宝搜索框会提示相关的搜索关键字。

这个功能可以使用jquery-ui中的autocomplete插件实现。

1474898515444058446.png jQueryUI是什么?

jQueryUI是基于jQuery开发的一个前端UI框架。

jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。

1474898515444058446.png autocomplete是什么?

autocomplete是jQueryUI中的一个小部件,使用autocomplete可以在用户向文本框输入文字的时候,根据用户输入的文字,模糊匹配相关的内容,并显示给用户选择。极大的改善了用户的使用体验。


本文的场景

在审批工单的时候,需要选择审批领导,但如果领导比较多,选择起来就比较繁琐,反倒不如手打输入姓名简单。

但手打姓名又容易出现错误,如果能够手打输入一部分,然后再选择,就方便多了。

因此在选择审批领导的时候,使用文本框接受用户的输入,当输入一两个字后,自动在数据库中模糊匹配,以选中正确的领导。


1473058358717068189.png 将jqueryui加到页面中

需要加入的文件有两个:css文件和js文件,另外,一定要记得加入jquery.js文件

<link rel="stylesheet" href="/静态资源路径/jquery-ui.min.css">
<script type="text/javascript" src="/静态资源路径/jquery-ui.min.js"></script>

 在页面放置文本框

<input type="text" id="qingjia_examer" class="form-control" 
  name="qingjia_examer" placeholder="请输入请假审批领导">

该html代码在页面放置了一个普通文本框,这时候还没有autocomplete功能。

 服务器端响应ajax请求的代码

本练习基于SpringMVC开发的。

@ResponseBody
@RequestMapping(value="/ajax_get_emps.do",produces="application/json;charset=utf-8")
public String ajax_get_emps(String empName){
	// 调用service层的方法,查询匹配姓名的员工
	List<Employee> emps=empService.lstEmpByName(empName);
	
	// 使用Gson类将查询到的结果转换为Json结果
	Gson gson=new Gson();
	String json=gson.toJson(emps);
	
	return json;
}

可以看到,本方法可通过/ajax_get_emps.do的url访问;

该方法接受empName的参数;

该方法的返回类型为json的,编码为utf-8


 初始化文本框的autocomplete模式

代码如下

$(function(){
	// ajax请求的url地址
	var ajaxUrl="${basePath}/org/dept_mgr/ajax_get_emps.do";
	// 初始化文本框为autocomplete模式的,接受参数为json格式的
	$("#qingjia_examer").autocomplete({
		// 定义数据源,以ajax方法请求数据源
		source:function(req,resp){
			// 使用jquery自带的ajax方法提交请求
			$.post(ajaxUrl,
					//第二个参数是json格式的,与springMVC的参数一致
					{empName:req.trim},
					// 第三个参数是ajax的回调函数
					function(data){
					// 当ajax返回数据后,使用resp参数执行map方法,将data中的数据自定义显示在列表中	
					resp($.map(data,function(item){
						// 返回类型为json的,是每一条记录的label和value
						return {label:item.empName+"["+item.deptName+"]",value:item.noid};
					}));
			});
		},
		// 当使用者选中某个选项的时候执行的方法 ,ui是选中对象的label和value属性
		select:function(event,ui){
			// 设置文本框显示的内容
			this.value=ui.item.label;
			// 返回false,上一句才可以生效,否则显示ui.item.value
			return false;
		}
	})
})