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

 更新时间:2017年03月25日 11:44:48   作者:warrah  
这篇文章主要介绍了JS控件bootstrap suggest plugin的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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实现简单的弹窗效果

    这篇文章主要为大家详细介绍了JavaScript实现简单的弹窗效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Javascript地址引用代码实例解析

    Javascript地址引用代码实例解析

    这篇文章主要介绍了Javascript地址引用代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • js编写一个简单的产品放大效果代码

    js编写一个简单的产品放大效果代码

    这篇文章主要为大家分享了js编写一个简单的产品放大效果代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 微信小程序开发之你可能没有踩过的神坑总结

    微信小程序开发之你可能没有踩过的神坑总结

    最近在做一个小程序的项目,所以记录下开发过程中遇到的坑,这篇文章主要给大家介绍了关于微信小程序开发之你可能没有踩过的神坑,需要的朋友可以参考下
    2021-09-09
  • 深入理解JavaScript事件机制

    深入理解JavaScript事件机制

    事件机制是几乎所有开发语言都有的机制,并不是deviceone的独创,在某些语言称之为消息(Event),有些地方称之为(Message).接下来通过本文给大家介绍JS事件机制的理解 ,需要的朋友一起学习吧
    2023-04-04
  • 浅析JavaScript预编译和暗示全局变量

    浅析JavaScript预编译和暗示全局变量

    这篇文章主要介绍了JavaScript预编译和暗示全局变量的相关资料,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • 微信小程序自定义头部导航栏(组件化)

    微信小程序自定义头部导航栏(组件化)

    这篇文章主要为大家详细介绍了微信小程序自定义头部导航栏,胶囊按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 一文带你深入了解JavaScript中的闭包

    一文带你深入了解JavaScript中的闭包

    闭包(closure)是一个函数以及其捆绑的周边环境状态的引用的组合,就是让开发者可以从内部函数访问外部函数的作用域,下面下面小编就来和大家深入聊聊它的使用吧
    2023-07-07
  • Javascript拖拽&拖放系列文章3之细说事件对象

    Javascript拖拽&拖放系列文章3之细说事件对象

    Javascript中的事件对象其实和.NET中继承自EventArgs类的派生类类似,用来给事件处理程序传递状态信息,从而进行相应的操作。这一篇文章将讲述Javascript事件对象中和实现拖拽功能相关的几个属性,并在最后将IE事件模型和标准DOM事件模型的差异封装到一个类中,从而适应所有的浏览器。
    2008-09-09
  • mustache.js实现首页元件动态渲染的示例代码

    mustache.js实现首页元件动态渲染的示例代码

    这篇文章主要介绍了mustache.js实现首页元件动态渲染的示例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12

最新评论