Bootstrap Search Suggest使用例子

Bootstrap Search Suggest 官方说明文档如下:suggest说明文档
由于该文档没有详细说明怎么运用到实际的项目中,特别是怎么将数据库中的值显示到页面上,所以我再运用到项目中,遇到了很多的坑,为了大家更好使用该插件,也为了自己总结下所遇到的坑,特总结如下
一、项目框架
1.后台:spring+springmvc+mybatis
2.前台: bootstrap+jQuery+ajax
3.项目管理:maven
二、前台代码
1.html代码

<div class="content nav-version"><table class="detail" style="margin-bottom:12px;"><tr><td class="first-col"> <div class="row"> <div class="col-lg-12"><div class="input-group" style="width: 100%; height: 17px; display: -webkit-box;"><label style="margin-left: 13px;">用户名称：</label><input id="userName" type="text" style="height: 22px;" /><div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown"> <span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" role="menu"></ul></div> </div> </div> </div></td></tr></table> </div>

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,//显示 headershowBtn: 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 { @Autowiredprivate UserService userService; @RequestMapping（value="/getUserName",method = RequestMethod.POST）@ResponseBodypublic String getUserName（HttpServletRequest request,HttpServletResponse response）{String userName = request.getParameter（"keyword"）;String userNameList = userService.getUserName（userName）;return userNameList;} }

四、service层和实现层代码

public interface UserService {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 { @Autowiredprivate UserDao userDao; @Overridepublic String getUserName（String userName） {String json="{"message": "","value": ["; // if（！userName.isEmpty（））{ List<String> 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层代码

public interface UserDao { List<String> getUserName（@Param（"userName"）String userName）; }

六mapper层代码

<?xml version="1.0" encoding="UTF-8" ?> <！DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace=".....dao.UserDao" ><！--根据输入的用户名类名查询相似的用户名 --><select id="getUserName" resultType="String">select distinct userNamefrom user_tablewhere yn=1 <if test="userName ！= null and userName ！= """>and userName like concat （#{userName},"%"）</if>limit 0,10</select></mapper>

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

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap Table使用教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。