本文介绍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);
});
以上就是本文的全部内容，希望对读者有所帮助，欢迎继续支持本站。