bootstrap-suggest-plugin

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

解决方案专栏收录该内容

45 篇文章

订阅专栏

本文展示了一个使用Bootstrap建议插件实现的下拉选择框示例。该示例通过JavaScript初始化了建议插件，并设置了相应的URL及字段配置，用于获取并显示数据。此外，还包含了对数据请求成功后的回调处理。

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

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


<!-- SUGGEST PLUGINS -->
<script src="$STATIC_DOMAIN/ddshow/admin/plugins/bootstrap-suggest.js" type="text/javascript"></script>


                            <div class="controls">
                                <div class="row">
                                    <div class="col-lg-3">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="test" name="channelName" value="$!channelName" >
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                </ul>
                                            </div>
                                            <!-- /btn-group -->
                                        </div>
                                    </div>
                                    ##<input type="hidden" class="form-control" id="positionId" name="positionId" value="$!{positionId}" >
                                    <div class="col-lg-3">
                                        <button type="submit" class="btn" id="dds-admin-submit">查询</button>
                                    </div>
                                </div>


<script type="text/javascript">

    var testBsSuggest = $("#test").bsSuggest({
        //url: "/rest/sys/getuserlist?keyword=",
        url: "/houtai/common/cps/all_position?keyword=",
        effectiveFields: ["positionName"],
        /*effectiveFields: ["userName", "shortAccount"],
        searchFields: [ "shortAccount"],
        effectiveFieldsAlias:{userName: "姓名"},*/
        idField: "id",
        keyField: "positionName"
    }).on('onDataRequestSuccess', function (e, result) {
        console.log('onDataRequestSuccess: ', result);
    }).on('onSetSelectValue', function (e, keyword) {
        //$('#positionId').val(keyword.id);
        console.log('onSetSelectValue: ', keyword);
    }).on('onUnsetSelectValue', function (e) {
        console.log("onUnsetSelectValue");
    });
</script>