Bootstrap Search Suggest使用例子

2019-11-19 18:22:21

字體：大中小

供稿：網(wǎng)友

Bootstrap Search Suggest 官方說明文檔如下:suggest說明文檔
由于該文檔沒有詳細(xì)說明怎么運(yùn)用到實(shí)際的項(xiàng)目中,特別是怎么將數(shù)據(jù)庫中的值顯示到頁面上,所以我再運(yùn)用到項(xiàng)目中,遇到了很多的坑,為了大家更好使用該插件,也為了自己總結(jié)下所遇到的坑,特總結(jié)如下

一、項(xiàng)目框架

1.后臺:spring+springmvc+mybatis

2.前臺: bootstrap+jQuery+ajax

3.項(xiàng)目管理: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是系統(tǒng)文件

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, // 是否允許無關(guān)鍵字時請求數(shù)據(jù)  ignorecase: true,//忽略大小寫  showHeader: false,//顯示 header  showBtn: false, //不顯示下拉按鈕  delayUntilKeyup: true, //獲取數(shù)據(jù)的方式為 firstByUrl 時，延遲到有輸入/獲取到焦點(diǎn)時才請求數(shù)據(jù)  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傳遞數(shù)據(jù)  };

另一個是,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層和實(shí)現(xiàn)層代碼

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 {   @Autowired  private UserDao userDao;   @Override  public 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" >  <!--根據(jù)輸入的用戶名類名查詢相似的用戶名 -->  <select id="getUserName" resultType="String">  select distinct userName  from user_table  where yn=1  <if test="userName != null and userName != ''">and userName like concat (#{userName},'%')</if>  limit 0,10  </select>  </mapper>

至此整個代碼就完成了,效果如下