bootstrap suggest的用法

最新推荐文章于 2024-03-27 09:37:16 发布

原创最新推荐文章于 2024-03-27 09:37:16 发布 · 2.5k 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何利用bootstrap-suggest-plugin这个插件在网页中实现一个输入框的智能提示功能。通过引入js文件，设置相关参数如url、idField、keyField等，结合fnProcessData回调函数处理json数据，可以实现从后台获取数据并展示给用户。当用户选择或取消选择时，会触发'onSetSelectValue'和'onUnsetSelectValue'事件，用于更新相关字段的值。

官网 https://github.com/lzwme/bootstrap-suggest-plugin

1、引入js文件

2、js脚本
<script th:inline="javascript">
        $("#executorName").bsSuggest({
            url: ctx + "proj/user/iexecutors/"+[[${issue.issueId}]],
            showBtn: false,
            idField: "userId",
            keyField: "userName",
            ignorecase: true,
            showHeader: true,
            effectiveFields:["userId", "loginName","userName"],
            effectiveFieldsAlias:{userId:"ID", loginName:"登录名", userName:"用户名"},
            fnProcessData: function (json){
                return {value: json.data};
            }
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword, data) {
            console.log('onSetSelectValue: ', keyword);
            $("#executorId").val(data.userId)
        }).on('onUnsetSelectValue', function (e) {
            console.log("onUnsetSelectValue");
            $("#executorId").val("")
        });
</script>

3、html
<input type="text" class="form-control" name="executorName" id="executorName" >
<div class="input-group-btn">
   <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu dropdown-menu-right" role="menu">
   </ul>
</div>

url 返回的json数据如果不是{"value": data}格式
则需要处理返回的数据

加入
fnProcessData: function (json){
    return {value: json.data};
}

fnProcessData是处理Url返回数据用的
json为url返回的数据，我的数据格式为{"code":1, data:[{"userId":1, "userName":"zs"},{"userId":1, "userName":"zs"}]}

从中取出数组数据，再组织为相应的格式
{value: json.data}