Bootstrap-suggest-plugin插件实现输入框自动补全功能详解
作者:工具松鼠时间:2026-10-22 01:38:33浏览:611
本文介绍bootstrap-suggest-plugin插件的使用方法,该插件用于实现输入框的自动补全功能。通过配置URL、有效字段及别名,可结合后端接口实现智能提示。示例展示了如何将显示名称与数据库ID绑定,确保表单提交时保存正确的数据标识。
插件介绍与获取
本文分享了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>
字段绑定与ID保存
在JavaScript代码中,主要涉及两个字段:keeperUserName和keeperUser。其中,keeperUser用于存储用户数据的ID。由于大多数表单在数据库中保存的是数据记录的ID而非显示值,因此需要确保提交时正确绑定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);
});
以上就是本文的全部内容,希望对读者有所帮助,欢迎继续支持本站。
作者最新文章
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比:哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45
无需安装环境,5款主流JavaScript在线运行工具推荐
2026-11-03 18:23:26
JS怎么将地址栏查询字符串转换为JSON对象
2026-11-03 18:10:29
