Bootstrap Search Suggest使用例子
Bootstrap Search Suggest 官方說(shuō)明文檔如下:suggest說(shuō)明文檔
由于該文檔沒(méi)有詳細(xì)說(shuō)明怎么運(yùn)用到實(shí)際的項(xiàng)目中,特別是怎么將數(shù)據(jù)庫(kù)中的值顯示到頁(yè)面上,所以我再運(yùn)用到項(xiàng)目中,遇到了很多的坑,為了大家更好使用該插件,也為了自己總結(jié)下所遇到的坑,特總結(jié)如下
一、項(xiàng)目框架
1.后臺(tái):spring+springmvc+mybatis
2.前臺(tái): bootstrap+jQuery+ajax
3.項(xiàng)目管理:maven
二、前臺(tái)代碼
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個(gè)js文件,一個(gè)是autoLoad.js,一個(gè)是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()主要是為了讓每次輸入的值都及時(shí)加載,不用也行 /*effectiveFields: ["userName", "shortAccount"], searchFields: [ "shortAccount"],*/ /* data: { userName: $("#userName").val() }, */ effectiveFieldsAlias:{userName: "分類名稱名稱"},//有效字段別名 allowNoKeyword: false, // 是否允許無(wú)關(guān)鍵字時(shí)請(qǐng)求數(shù)據(jù) ignorecase: true,//忽略大小寫(xiě) showHeader: false,//顯示 header showBtn: false, //不顯示下拉按鈕 delayUntilKeyup: true, //獲取數(shù)據(jù)的方式為 firstByUrl 時(shí),延遲到有輸入/獲取到焦點(diǎn)時(shí)才請(qǐng)求數(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個(gè)地方,一個(gè)是
var ajaxParam = { type: 'POST', dataType: options.jsonp ? 'jsonp' : 'json', timeout: 5000, data:{"keyword":keyword}//添加data,用于post傳遞數(shù)據(jù) };
另一個(gè)是,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>
至此整個(gè)代碼就完成了,效果如下
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS控件bootstrap suggest plugin使用方法詳解
- bootstrap suggest搜索建議插件使用詳解
- Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
- Bootstrap select實(shí)現(xiàn)下拉框多選效果
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
- BootStrap下拉框在firefox瀏覽器界面不友好的解決方案
- Bootstrap框架下下拉框select搜索功能
- Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
- 自定義Angular指令與jQuery實(shí)現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
- bootstrap suggest下拉框使用詳解
相關(guān)文章
JavaScript中創(chuàng)建字典對(duì)象(dictionary)實(shí)例
這篇文章主要介紹了JavaScript中創(chuàng)建字典對(duì)象(dictionary)實(shí)例,本文直接給出了實(shí)現(xiàn)的源碼,并給出了使用示例,需要的朋友可以參考下2015-03-03微信小程序HTTP接口請(qǐng)求封裝代碼實(shí)例
這篇文章主要介紹了微信小程序HTTP接口請(qǐng)求封裝代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解
下面小編就為大家?guī)?lái)一篇原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10JavaScript實(shí)現(xiàn)的簡(jiǎn)單冪函數(shù)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單冪函數(shù),實(shí)例分析了javascript實(shí)現(xiàn)冪運(yùn)算的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04