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);
    });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Bootstrap BootstrapDialog使用详解

    Bootstrap BootstrapDialog使用详解

    这篇文章主要为大家详细介绍了Bootstrap BootstrapDialog使用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JavaScript实现滑块验证码

    JavaScript实现滑块验证码

    这篇文章主要为大家详细介绍了JavaScript实现滑块验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 用innerhtml提高页面打开速度的方法

    用innerhtml提高页面打开速度的方法

    这篇文章介绍了用innerhtml提高页面打开速度的方法,有需要的朋友可以参考一下
    2013-08-08
  • js实现课堂随机点名系统

    js实现课堂随机点名系统

    这篇文章主要介绍了js实现课堂随机点名系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • webpack loader使用的安装配置

    webpack loader使用的安装配置

    这篇文章主要为大家介绍了webpack loader使用的安装配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • js利用prototype调用Array的slice方法示例

    js利用prototype调用Array的slice方法示例

    这篇文章主要介绍了如何利用js的prototype调用Array的slice方法,需要的朋友可以参考下
    2014-06-06
  • 浅谈微信JS-SDK 微信分享接口开发(介绍版)

    浅谈微信JS-SDK 微信分享接口开发(介绍版)

    这篇文章主要介绍了浅谈微信JS-SDK 微信分享接口开发(介绍版),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 简单实现js悬浮导航效果

    简单实现js悬浮导航效果

    这篇文章主要教大家如何简单实现js悬浮导航效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 解析如何利用iframe标签以及js制作时钟

    解析如何利用iframe标签以及js制作时钟

    本文对如何利用iframe标签以及js制作时钟进行了全面解析,分步说明,条理清晰,感兴趣的朋友可以看下
    2016-12-12
  • 微信小程序实现历史搜索功能的全过程(h5同理)

    微信小程序实现历史搜索功能的全过程(h5同理)

    最近在使用微信小程序开发的时候遇到了一个需求,需要实现历史搜索记录的功能,所以下面这篇文章主要给大家介绍了关于微信小程序实现历史搜索功能(h5同理)的相关资料,需要的朋友可以参考下
    2022-12-12

最新评论