快捷導(dǎo)航

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

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

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

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

頁(yè)面如下面所示，使用此控件

<div class="form-group">
          <label class="col-xs-3 text-right control-label">庫(kù)管員:</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è)這里用到了兩個(gè)字段keeperUserName,keeperUser。其中keeperUser是用來(lái)保存用戶數(shù)據(jù)的id，因?yàn)楹芏鄁orm表單保存的數(shù)據(jù)庫(kù)中都是數(shù)據(jù)的id，而不是數(shù)據(jù)顯示值。

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

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

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)簡(jiǎn)單的彈窗效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
Javascript地址引用代碼實(shí)例解析
這篇文章主要介紹了Javascript地址引用代碼實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
js編寫一個(gè)簡(jiǎn)單的產(chǎn)品放大效果代碼
這篇文章主要為大家分享了js編寫一個(gè)簡(jiǎn)單的產(chǎn)品放大效果代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-06-06
微信小程序開(kāi)發(fā)之你可能沒(méi)有踩過(guò)的神坑總結(jié)
最近在做一個(gè)小程序的項(xiàng)目,所以記錄下開(kāi)發(fā)過(guò)程中遇到的坑,這篇文章主要給大家介紹了關(guān)于微信小程序開(kāi)發(fā)之你可能沒(méi)有踩過(guò)的神坑,需要的朋友可以參考下
2021-09-09
深入理解JavaScript事件機(jī)制
事件機(jī)制是幾乎所有開(kāi)發(fā)語(yǔ)言都有的機(jī)制，并不是deviceone的獨(dú)創(chuàng)，在某些語(yǔ)言稱之為消息(Event),有些地方稱之為(Message).接下來(lái)通過(guò)本文給大家介紹JS事件機(jī)制的理解，需要的朋友一起學(xué)習(xí)吧
2023-04-04
淺析JavaScript預(yù)編譯和暗示全局變量
這篇文章主要介紹了JavaScript預(yù)編譯和暗示全局變量的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下
2020-09-09
微信小程序自定義頭部導(dǎo)航欄(組件化)
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義頭部導(dǎo)航欄，膠囊按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
一文帶你深入了解JavaScript中的閉包
閉包（closure）是一個(gè)函數(shù)以及其捆綁的周邊環(huán)境狀態(tài)的引用的組合，就是讓開(kāi)發(fā)者可以從內(nèi)部函數(shù)訪問(wèn)外部函數(shù)的作用域，下面下面小編就來(lái)和大家深入聊聊它的使用吧
2023-07-07
Javascript拖拽&拖放系列文章3之細(xì)說(shuō)事件對(duì)象
Javascript中的事件對(duì)象其實(shí)和.NET中繼承自EventArgs類的派生類類似，用來(lái)給事件處理程序傳遞狀態(tài)信息，從而進(jìn)行相應(yīng)的操作。這一篇文章將講述Javascript事件對(duì)象中和實(shí)現(xiàn)拖拽功能相關(guān)的幾個(gè)屬性，并在最后將IE事件模型和標(biāo)準(zhǔn)DOM事件模型的差異封裝到一個(gè)類中，從而適應(yīng)所有的瀏覽器。
2008-09-09
mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的示例代碼
這篇文章主要介紹了mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的示例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-12-12