第3.1.4章 WEB系统最佳实践 js控件之bootstrap-suggest-plugin

warrah

于 2016-12-11 14:35:51 发布

阅读量6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：岁月云——Web系统最佳实践岁月会计云——前端开发文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/warrah/article/details/53573018

岁月云——Web系统最佳实践同时被 2 个专栏收录

118 篇文章

订阅专栏

岁月会计云——前端开发

73 篇文章

订阅专栏

本文介绍了一个基于Bootstrap的编辑提示控件插件——bootstrap-suggest-plugin，该插件能够帮助用户实现输入框的自动补全功能。文章通过具体代码示例展示了如何配置和使用此插件，并解释了关键参数的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap-suggest-plugin插件地址，这是一个简单的编辑提示控件
bootstrap-suggest-plugin demo地址

页面如下面所示，使用此控件

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