如何实现简单的自动提示(autocomplete)填充搜索功能java代码。

这是在下的第一遍博客，废话不多说，直接进入正题：

第一种是实现单一字段的自动填充查询的功能代码。

我的代码是基于：springmvc+mybatis的框架。

（1）controller层

/**

* 自动填充群组名称

*/

@RequestMapping("/autocompleteGnames")

@ResponseBody

public Object autocompleteGnames(HttpServletRequest request){

return groupService.autocompleteGnames();

}

(2)service

/**

* 自动填充群组名称

* @return

*/

String[] autocompleteGnames();

(3)impl

/**

* 自动填充群组名称

*/

@Override

public String[] autocompleteGnames() {

List<Map<String,String>> groupList = groupMapper.autocompleteGnames();

String[] strs = new String[groupList.size()];

for (int i = 0; i < groupList.size(); i++) {

strs[i]=groupList.get(i).get("GNAME");

}

return strs;

}

(4)dao

/**

* 自动填充

* @return

*/

List<Map<String, String>> autocompleteGnames();

(5)mapper.xml

<!-- 自动填充 -->

<select id="autocompleteGnames" resultType="Map">

select t.gname from tp_im_group t order by gname

</select>

前台页面代码：

(6)group_list.jsp

需要引入的js和css。

<link rel="stylesheet" type="text/css" href="resource/css/jquery-ui.css"/>

<script type="text/javascript" src="resource/js/jquery-ui.js"></script>

//自动填充

$(function(){

var arr = new Array();

$.getJSON("group/autocompleteGnames.action",function(data){

$("#dautocomplete").autocomplete({

minLength: 1,//最少输入1个字符才执行

source: data

});

});

});

<input id="dautocomplete" name="gname" class="text" value="${param.gname }"/>

第二种是针对多字段查询自动填充方法，中英文可以任意使用：

创建一个TempUser的实体类，里面封装了name和uname两个属性的方法。

private String name;

private String uname;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getUname() {

return uname;

}

public void setUname(String uname) {

this.uname = uname;

}

@Override

public String toString() {

return "TempUser [name=" + name + ", uname=" + uname + "]";

}

（1）controller层

/**

* 自动填充发布人

*/

@RequestMapping("/autocompleteNames")

@ResponseBody

public TempUser[] autocompleteNames(HttpServletRequest request){

return userService.autocompleteNames();

}

(2)service

/**

* 自动填充发布人

* @return

*/

TempUser[] autocompleteNames();

(3)impl

/**

* 自动填充发布人

*/

@Override

public TempUser[] autocompleteNames() {

List<Map<String,String>> uList = userMapper.autocompleteNames();

TempUser[] strs = new TempUser[uList.size()];

for (int i = 0; i < uList.size(); i++) {

strs[i] = new TempUser();

strs[i].setUname(uList.get(i).get("UNAME"));

strs[i].setName(uList.get(i).get("NAME"));

}

return strs;

}

(4)dao

/**

* 自动填充

* @return

*/

List<Map<String, String>> autocompleteNames();

(5)mapper.xml

<!-- 自动填充 -->

<select id="autocompleteNames" resultType="Map">

select uname,name from tp_user order by uname,name

</select>

前台页面代码：

(6)pyq_list.jsp

需要引入的js和css。

<link rel="stylesheet" type="text/css" href="resource/css/jquery-ui.css"/>

<script type="text/javascript" src="resource/js/jquery-ui.js"></script>

//去重复

Array.prototype.unique = function(){

this.sort(); //先排序

var res = [this[0]];

for(var i = 1; i < this.length; i++){

if(this[i] != res[res.length - 1]){

res.push(this[i]);

}

}

return res;

};

//自动填充

$(function(){

$.getJSON("pyq/autocompleteNames.action",function(data){

var arr= [];

var j=data.length;

for (var i = 0; i < data.length; i++) {

arr[i]=data[i].name;

}

for (var i = 0; i < data.length; i++) {

arr[i+j]=data[i].uname;

}

arr=arr.unique();

console.log(arr);

$("#dautocomplete").autocomplete({

minLength: 1,//最少输入1个字符才执行

source: arr

});

});

});

<input id="dautocomplete" name="name" class="text" value="${param.name }"/>

如上本人实测能实现功能，但这种方法并不是最好的，可以讨论优化代码和方法，仅供参考！