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的仿flash的广告轮播代码
Nov 04 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
javascript不可用的问题探究
Oct 01 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
深入理解 JS 垃圾回收
Jun 03 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来实现网络服务
2009/09/15 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
基于Python函数和变量名解析
2019/07/19 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
详解Python yaml模块
2020/09/23 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
幼儿园美术教学反思
2014/01/31 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
物业保安岗位职责
2014/07/02 职场文书
工程技术员岗位职责
2015/04/11 职场文书
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers