首頁  >  文章  >  web前端  >  詳細介紹JS控制bootstrap suggest plugin的使用方法

詳細介紹JS控制bootstrap suggest plugin的使用方法

黄舟
黄舟原創
2017-03-25 14:18:012930瀏覽

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

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

bootstrap-suggest-plugin插件地址

#頁面如下面所示,使用此控制項

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

js側這裡用到了兩個欄位keeperUserName,keeperUser。其中keeperUser是用來保存使用者資料的id,因為很多form表單保存的資料庫中都是資料的id,而不是資料顯示值。

 $(&#39;#keeperUserName&#39;).bsSuggest({
      url:ctx+&#39;/fontalUser/find?filter_likes_name=&#39;,
      getDataMethod:&#39;url&#39;,
      effectiveFields:[&#39;username&#39;,&#39;name&#39;,&#39;phone&#39;],
      effectiveFieldsAlias:{username:&#39;用户账号&#39;,name:&#39;姓名&#39;,phone:&#39;手机号&#39;},
      showHeader:true,
      allowNoKeyword:false,
      multiWord:false,
      idField:&#39;id&#39;,
      keyField:&#39;name&#39;
    }).on(&#39;onSetSelectValue&#39;, function (e, keyword, data) {
      $(&#39;#keeperUser&#39;).val(data.id);
    });

以上是詳細介紹JS控制bootstrap suggest plugin的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn