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


Posted in Javascript onMarch 25, 2017

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

bootstrap-suggest-plugin插件地址

JS控件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);
    });

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

Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
bootstrap table动态加载数据示例代码
Mar 25 #Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 #Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 #Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 #Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 #Javascript
JS实现列表页面隔行变色效果
Mar 25 #Javascript
angular仿支付宝密码框输入效果
Mar 25 #Javascript
You might like
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
scrapy-splash简单使用详解
2021/02/21 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
秘书岗位职责
2013/11/18 职场文书
工艺工程师工作职责
2013/11/23 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
食品安全检查制度
2014/02/03 职场文书
会计自荐信范文
2014/03/09 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
PHP中strval()函数实例用法
2021/06/07 PHP