Bootstrap Search Suggest使用例子

Bootstrap Search Suggest使用例子

Bootstrap Search Suggest 官方说明文档如下:suggest说明文档

由于该文档没有详细说明怎么运用到实际的项目中,特别是怎么将数据库中的值显示到页面上,所以我再运用到项目中,遇到了很多的坑,为了大家更好使用该插件,也为了自己总结下所遇到的坑,特总结如下

一、项目框架

1.后台:spring+springmvc+mybatis

2.前台: bootstrap+jquery+ajax

3.项目管理:maven

二、前台代码

1.html代码

ifhLKLJCfo

用户名称：

ifhLKLJCfo

2,js代码,主要有2个js文件,一个是autoLoad.js,一个是bootstrap-suggest.js,autoLoad.js文件主要用于配置属性,bootstrap-suggest.js是系统文件

autoLoad.js代码如下:

(function() {

$("#userName").bsSuggest({

url: contextUrl +'/user/getuserName?d='+new Date().getTime(),

//d='+new Date().getTime()主要是为了让每次输入的值都及时加载,不用也行

/*effectiveFields: ["userName", "shortAccount"],

searchFields: [ "shortAccount"],*/

/* data: {

userName: $("#userName").val()

}, */

effectiveFieldsAlias:{userName: "分类名称名称"},//有效字段别名

allowNoKeyword: false, // 是否允许无关键字时请求数据

ignorecase: true,//忽略大小写

showHeader: false,//显示 header

showBtn: false, //不显示下拉按钮

delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据

idField: "userName",

keyField: "userName"

}).on('onDataRequestSuccess', function (e, result) {

console.log('onDataRequestSuccess: ', result);

}).on('onSetSelectValue', function (e, keyword, data) {

console.log('onSetSelectValue: ', keyword, data);

}).on('onUnsetSelectValue', function () {

console.log("onUnsetSelectValue");

});

}());

bootstrap-suggest.js,autoLoad.js 代码,由于代码太多,给出下载地址,主要修改了2个地方,一个是

var ajaxParam = {

type: 'POST',

dataType: options.jsonp ? 'jsonp' : 'json',

timeout: 5000,

data:{"keyword":keyword}//添加data,用于post传递数据

};

另一个是,listStyle,添加了位置信息

listStyle: {

'position':'relative',

'margin-left':'-206px',

'margin-top':'26px',

'padding-top': 0,

'max-height': '375px',

'max-width': '800px',

'overflow': 'auto',

'width': 'auto',

'transition': '0.3s',

'-webkit-transition': '0.3s',

'-moz-transition': '0.3s',

'-o-transition': '0.3s'

},

三、controller层代码

@Controller

@RequestMapping("/user")

public class UserController {

@Autowired

private UserService userService;

@RequestMapping(value="/getUserName",method = RequestMethod.POST)

@ResponseBody

public String getUserName(HttpServletRequest request,HttpServletResponse response){

String userName = request.getParameter("keyword");

String userNameList = userService.getUserName(userName);

return userNameList;

}

}

四、service层和实现层代码

public interface UseifhLKLJCforService {

String getUserName(String userName);

}

/**

* @author 李光光(编码小王子)

* @Email 826331692@jd.com

* @date 2016年12月19日 下午4:18:45

* @version 1.0

*/

@Service

public class UserServiceImpl implements UserService {

@Autowired

private UserDao userDao;

@Override

public String getUserName(String userName) {

String json="{\"message\": \"\",\"value\": [";

// if(!userName.isEmpty()){

List list = userDao.getUserName(userName);

if(list != null && !list.isEmpty()){

for(int i=0;i

json+="{"+"\"userName\":"+"\""+list.get(i)+"\"" +"},";

}

json = json.substring(0,json.length()-1>0?json.length()-1:1);

json+="],\"code\": 200,\"redirect\": \"\"}";

return json;

}else{

json+="],\"code\": 400,\"redirect\": \"\"}";

return json;

}

}

}

五、dao层代码

public interface UserDao {

List getUserName(@Param("userName")String userName);

}

六mapper层代码

select distinct userName

from user_table

where yn=1

and userName like concat (#{userName},'%')

limit 0,10

至此整个代码就完成了,效果如下

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

json+="{"+"\"userName\":"+"\""+list.get(i)+"\"" +"},";

}

json = json.substring(0,json.length()-1>0?json.length()-1:1);

json+="],\"code\": 200,\"redirect\": \"\"}";

return json;

}else{

json+="],\"code\": 400,\"redirect\": \"\"}";

return json;

}

}

}

五、dao层代码

public interface UserDao {

List getUserName(@Param("userName")String userName);

}

六mapper层代码

select distinct userName

from user_table

where yn=1

and userName like concat (#{userName},'%')

limit 0,10

至此整个代码就完成了,效果如下

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。