欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap Search Suggest使用例子

 更新時(shí)間:2016年12月21日 08:50:49   作者:編碼小王子  
這篇文章主要為大家詳細(xì)介紹了Bootstrap Search Suggest使用例子,教大家使用bootstrap搜索建議插件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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è)精彩的專題:

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 奇妙的js

    奇妙的js

    奇妙的js...
    2007-09-09
  • 使用JavaScript平移和縮放圖像的示例代碼

    使用JavaScript平移和縮放圖像的示例代碼

    平移和縮放是查看圖像時(shí)常用的功能,我們可以放大圖像以查看更多細(xì)節(jié),進(jìn)行圖像編輯,Dynamsoft Document Viewer是一個(gè)用于此目的的SDK,它為文檔圖像提供了一組查看器,在本文中,我們將演示如何使用它來(lái)平移和縮放圖像,需要的朋友可以參考下
    2024-08-08
  • JS數(shù)組合并與對(duì)象合并的方法匯總

    JS數(shù)組合并與對(duì)象合并的方法匯總

    這篇文章主要給大家介紹了關(guān)于JS數(shù)組合并與對(duì)象合并的方法,本文將介紹常見(jiàn)的JS對(duì)象合并和數(shù)組合并方法,幫助讀者更好地理解和運(yùn)用這些方法,需要的朋友可以參考下
    2024-12-12
  • 詳解基于原生JS驗(yàn)證表單組件xy-form

    詳解基于原生JS驗(yàn)證表單組件xy-form

    這篇文章主要介紹了詳解基于原生JS驗(yàn)證表單組件xy-form,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • 剖析CocosCreator新資源管理系統(tǒng)

    剖析CocosCreator新資源管理系統(tǒng)

    這篇文章主要介紹了CocosCreator新資源管理系統(tǒng),從v2.4開(kāi)始,Creator使用AssetBundle完全重構(gòu)了資源底層,提供了更加靈活強(qiáng)大的資源管理方式,也解決了之前版本資源管理的痛點(diǎn)(資源依賴與引用),本文將帶你深入了解Creator的新資源底層。
    2021-04-04
  • JavaScript中創(chuàng)建字典對(duì)象(dictionary)實(shí)例

    JavaScript中創(chuàng)建字典對(duì)象(dictionary)實(shí)例

    這篇文章主要介紹了JavaScript中創(chuàng)建字典對(duì)象(dictionary)實(shí)例,本文直接給出了實(shí)現(xiàn)的源碼,并給出了使用示例,需要的朋友可以參考下
    2015-03-03
  • 淺談javascript事件取消和阻止冒泡

    淺談javascript事件取消和阻止冒泡

    這篇文章主要介紹了淺談javascript事件取消和阻止冒泡的方法和示例,有需要的小伙伴可以參考下。
    2015-05-05
  • 微信小程序HTTP接口請(qǐng)求封裝代碼實(shí)例

    微信小程序HTTP接口請(qǐng)求封裝代碼實(shí)例

    這篇文章主要介紹了微信小程序HTTP接口請(qǐng)求封裝代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-09-09
  • 原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解

    原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解

    下面小編就為大家?guī)?lái)一篇原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-10-10
  • JavaScript實(shí)現(xiàn)的簡(jiǎn)單冪函數(shù)實(shí)例

    JavaScript實(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

最新評(píng)論