Bootstrap Search Suggest使用例子

发布时间：2020-12-18 00:44:42 所属栏目：安全来源：网络整理

导读：Bootstrap Search Suggest 官方说明文档如下:由于该文档没有详细说明怎么运用到实际的项目中,特别是怎么将数据库中的值显示到页面上,所以我再运用到项目中,遇到了很多的坑,为了大家更好使用该插件,也为了自己总结下所遇到的坑,特总结如下一、项目框架 1.后

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

一、项目框架

1.后台:spring+springmvc+mybatis

2.前台: bootstrap+jQuery+ajax

3.项目管理:maven

二、前台代码

1.html代码

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

autoLoad.js代码如下:

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

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

三、controller层代码

@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层和实现层代码

@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<list.size;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层代码

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

六mapper层代码

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!