Question

我想创建一个下拉列表，每个选项都像表行（它应该如下图所示）。我对创建自己的控件不感兴趣，因为它需要很多时间。

enter image description here

任何想法的人？请给我一些链接。

Answer 1

您想要展示的内容非常具体，我怀疑您是否会找到一个插件来完成您正在尝试实现的内容。为什么不从可搜索的文本框中滑动打开表格。我知道你要避免的是什么，但它可能最终成为最简单的解决方案。

看看我创建的这个使用jQuery Searchable插件的小提琴。

HTML：

<div class="custom-dropdown">
    <input type="search" id="search" value="" class="dropdown-search" placeholder="Search">
    <div class="table-wrapper">
        <table class="dropdown-table">
            <thead>
                <tr>
                    <th colspan="4"> <span class="search-result-counter"></span>

                    </th>
                </tr>
            </thead>
            <tbody>
                <!-- table content here -->
            </tbody>
        </table>
    </div>
</div>
<script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>

的CSS：

.custom-dropdown {
    position:relative;
}
.custom-dropdown .table-wrapper {
    max-height: 150px;
    overflow-y:auto;
    position:absolute;
    top:21px;
    border:1px solid #ccc;
    display:none;
    overflow-x:hidden;
}
.custom-dropdown .dropdown-table {
    width: 300px;
}
.custom-dropdown .dropdown-table td {
    border-bottom:1px solid #ccc;
}

的javascript：

$(function () {
    $('.dropdown-table').searchable({
        striped: true,
        searchType: 'fuzzy'
    });

    $(".dropdown-search").bind("keyup", function () {
        var $this = $(this);
        var $table = $this.next();
        if ($this.val().length > 0 && $table.is(":hidden")) {
            $table.show();
        } else {
            $table.hide();
        }

        var resultCount = ($table.find("tr:visible").length - 1);
        $table.find(".search-result-counter").html(resultCount + " records found.");
    });
});

希望有所帮助！

可搜索的下拉列表，每个选项都像表行

1 个答案: