Detaillierte Einführung in die Verwendung des JS-Steuer-Bootstrap-Plugins

In diesem Artikel wird hauptsächlich die Verwendung des JS-Control-Bootstrap-Suggest-Plugins vorgestellt, das einen gewissen Referenzwert hat.

Dieser Artikel wird mit allen Bootstrap-Suggest-Plugins geteilt -Plugin-Plugin, dies ist eine einfache Bearbeitungsaufforderungssteuerung als Referenz. Der spezifische Inhalt lautet wie folgt:

Bootstrap-suggest-plugin-Plugin-Adresse

Die Seite sieht wie unten gezeigt aus, wenn dieses Steuerelement verwendet wird

<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>

Die beiden Felder keeperUserName und keeperUser werden hier auf der js-Seite verwendet. Unter diesen ist keeperUser die ID, die zum Speichern von Benutzerdaten verwendet wird, da die von vielen Formularen gespeicherte Datenbank die ID der Daten und nicht den Datenanzeigewert enthält.

 $('#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);
    });

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung des JS-Steuer-Bootstrap-Plugins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!