JavaScript

超轻量级php框架startmvc

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

更新时间:2020-05-02 02:30:01 作者:startmvc
本文为大家分享了bootstrap-suggest-plugin插件,这是一个简单的编辑提示控件,供大家参考,具

本文为大家分享了bootstrap-suggest-plugin插件,这是一个简单的编辑提示控件,供大家参考,具体内容如下

bootstrap-suggest-plugin插件地址

页面如下面所示,使用此控件


<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侧这里用到了两个字段keeperUserName,keeperUser。其中keeperUser是用来保存用户数据的id,因为很多form表单保存的数据库中都是数据的id,而不是数据显示值。


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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

bootstrap suggest