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中的isXX系列
Aug 01 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
jquery 手势密码插件
Mar 17 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
Vue实现跑马灯效果
May 25 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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 smarty 二级分类代码和模版循环例子
2011/06/16 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
new修饰符是起什么作用
2015/06/28 面试题
灵泰克Java笔试题
2016/01/09 面试题
IBatis持久层技术
2016/07/18 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
社区志愿者活动总结
2014/06/26 职场文书
法定代表人免职证明
2015/06/24 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server