快捷導航

Bootstrap Search Suggest使用例子

更新時間：2016年12月21日 08:50:49 作者：編碼小王子

這篇文章主要為大家詳細介紹了Bootstrap Search Suggest使用例子，教大家使用bootstrap搜索建議插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

一、項目框架

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是系統(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 時，延遲到有輸入/獲取到焦點時才請求數(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層和實現(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>

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