快捷導(dǎo)航

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:'手機號'},
      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)文章

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