jQuery autocomplete前后端

简介

jQuery autocomplete是一个用于自动补全功能的插件

在使用这个插件的时候找了好多都不能用，总结出来自己整理了一下。

引入js、css

需要引用的js、css文件有三个，这里提供一个在线网址：

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

前端jsp页面

前端html代码只需要提供一个输入文本框即可（此处有引用layui样式，可以无视）：

<input type="text" name="dwdz" id="dwdz"  value="${dzd.dwdz}" lay-verify="required" maxlength=""
		autocomplete="off" class="layui-input" style="width: 800px">

js代码

接下来就是对应的js代码和ajax调用对应的方法：

$(function() {
    $( "#dwdz" ).autocomplete({
      source: function (request, response) {
        $.ajax({
         async: false,   //同步调用
         type: "POST",
         url: "zdcx/dzcx",
         dataType: "json",
         data: {"dwdz":$("#dwdz").val()}, //参数（根据输入的内容同步查询）
         success: function (data){
			response($.map(data, function(item) {
				return {
				label : item,
				value : item
				};
				}));
			}
		});		
   		}
  	});
});

后端代码

最后是后端部分的代码：

    @RequestMapping(value = "/dzcx",method = RequestMethod.POST)
   	@ResponseBody
   	public String[] dzcx(String khbh,String dwdz) {	
    	String[] dz=new String[10];
    	List<DzdcxPO>  list = null;
    	try {
			list = dzdcxService.getDzdDz(dwdz);
			for(int i=0;i<list.size();i++) {
				if(i<10) {
					dz[i]=list.get(i).getDwdz();
				}else if(i==10) {
					break;
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
       	return dz;
   	}

在这里把查出来的list集合转成数组，因为试了好久这个插件的部分属性功能不知为何无法生效，所以只好在后端处理只显示10条数据。
这里用的是ssm框架，往下就是查询数据，剩下的内容和sql就不贴出来啦——————

完成

写完就是下面这张图了。。。

补充

不使用后端传递的数据

如果不使用后端数据库数据时，html代码一样，只要js中直接给属性赋值就好，如下：

var availableTags = [];
        $(function() {
          var availableTags = [
            "xxx",
            "xxxxx",
            "xxxxxx"
          ];
          $( "#tags" ).autocomplete({
            source: availableTags
          });
        });