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 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
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中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
django列表筛选功能的实现代码
2020/03/27 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
采购员岗位职责
2013/11/15 职场文书
护士辞职信模板
2014/01/20 职场文书
写给老师的表扬信
2014/01/21 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
幼儿园标语大全
2014/06/19 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
5.12护士节活动总结
2015/02/10 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
交通事故调解协议书
2015/05/20 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技