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 相关文章推荐
基于jquery的图片懒加载js
Jun 30 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
JavaScript实现模态对话框实例
Jan 13 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最常用的正则表达式
2017/02/13 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python MD5文件生成码
2009/01/12 Python
Java分治归并排序算法实例详解
2017/12/12 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python实现贪吃蛇游戏
2020/03/21 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
python实现人像动漫化的示例代码
2020/05/17 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
个人求职简历的自我评价范文
2013/10/09 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
运动会拉拉队口号
2014/06/09 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL