JS控件bootstrap suggest plugin使用方法詳解

更新時間：2017年03月25日 11:44:48 作者：warrah

這篇文章主要介紹了JS控件bootstrap suggest plugin的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文為大家分享了bootstrap-suggest-plugin插件，這是一個簡單的編輯提示控件，供大家參考，具體內(nèi)容如下

頁面如下面所示，使用此控件

<div class="form-group">
          <label class="col-xs-3 text-right control-label">庫管員:</label>
          <div class="col-xs-9">
            <div class="input-group">
              <input type="text" class="form-control no-padding" id="keeperUserName" value="${keeperUserName}" />
              <div class="input-group-btn" style="width:1px;">
                <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
              </div>
        </div>
    </div>
</div>

js側(cè)這里用到了兩個字段keeperUserName,keeperUser。其中keeperUser是用來保存用戶數(shù)據(jù)的id，因為很多form表單保存的數(shù)據(jù)庫中都是數(shù)據(jù)的id，而不是數(shù)據(jù)顯示值。

 $('#keeperUserName').bsSuggest({
      url:ctx+'/fontalUser/find?filter_likes_name=',
      getDataMethod:'url',
      effectiveFields:['username','name','phone'],
      effectiveFieldsAlias:{username:'用戶賬號',name:'姓名',phone:'手機(jī)號'},
      showHeader:true,
      allowNoKeyword:false,
      multiWord:false,
      idField:'id',
      keyField:'name'
    }).on('onSetSelectValue', function (e, keyword, data) {
      $('#keeperUser').val(data.id);
    });

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

您可能感興趣的文章:

相關(guān)文章

用js判斷輸入是否為中文的函數(shù)
本篇文章主要是對js判斷輸入是否為中文的函數(shù)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
security.js實現(xiàn)的RSA加密功能示例
這篇文章主要介紹了security.js實現(xiàn)的RSA加密功能,結(jié)合實例形式分析了基于security.js進(jìn)行RSA加密的相關(guān)操作技巧,需要的朋友可以參考下
2018-06-06
js實現(xiàn)車輛管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)車輛管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
js下將字符串當(dāng)函數(shù)執(zhí)行的方法
js下將字符串當(dāng)函數(shù)執(zhí)行的方法，需要的朋友可以參考下。
2011-07-07
基于BootStrap柵格欄系統(tǒng)完成網(wǎng)站底部版權(quán)信息區(qū)
網(wǎng)站底部版權(quán)信息區(qū)可以用bootstrap的“柵格系統(tǒng)”完成，下面給大家分享一個未經(jīng)處理的底部版權(quán)信息區(qū)的樣式，大家可以做個參考
2016-12-12
MVVM框架下實現(xiàn)分頁功能示例
分頁這種組件，幾乎每一種框架都有這樣的組件，這篇文章主要介紹了MVVM框架下實現(xiàn)分頁功能示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
小程序獲取當(dāng)前位置加搜索附近熱門小區(qū)及商區(qū)的方法
這篇文章主要介紹了小程序獲取當(dāng)前位置加搜索附近熱門小區(qū)及商區(qū)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
js實現(xiàn)canvas圖片與img圖片的相互轉(zhuǎn)換的示例
本篇文章主要介紹了js實現(xiàn)canvas圖片與img圖片的相互轉(zhuǎn)換的示例，具有一定的參考價值，有興趣的可以了解一下
2017-08-08
window.onload的頁面加載技巧
大家仔細(xì)看下面兩段代碼，代碼一的window.onload = doIt()函數(shù)后面有();而代碼二的window.onload = doIt函數(shù)名后面沒有括號。
2008-09-09
JS基于對象的鏈表實現(xiàn)與使用方法示例
這篇文章主要介紹了JS基于對象的鏈表實現(xiàn)與使用方法,結(jié)合實例形式分析了鏈表的原理及javascript定義與使用鏈表的相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01