Question

因此，我正在尝试创建一个可搜索的div链接列表，用户可以使用该列表快速跳转到页面上的该位置。这是使用Flask和Bootstrap。

我成功构建了一个下拉列表来执行此操作，但它无法搜索。

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
       aria-haspopup="true" aria-expanded="false">
        Quick Scroll
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        {% for company in active_companies %}
            <a class="dropdown-item" href="#company_{{ company[0] }}"
               role="button">
                {{ company[1] }}
            </a>
        {% endfor %}
    </div>
</li>

我已经尝试了Bootstrap-Select，但我似乎无法正确加载库。也许是一个Bootstrap 4问题，也许是Flask，也许是我。我尝试加载Semantic UI's dropdown module（并重构以避免任何冲突），但这也不起作用。所以我开始自己组建一个。

我现在已经开始了。单击输入框时可以看到下拉列表，单击输入框时会关闭。 如果我可以通过点击其他地方关闭它，我会满意。但是我尝试使用window.onclick失败了。

如果你能指出我可以使用的Bootstrap实现，或者看到我正在做的事情的缺陷（我确信有无数）让我知道。

    <form class="form-inline my-2 my-lg-0">
        <input onclick="myFunction()" type="text" class="live-search-box" placeholder="Company/Complex"/>
        <ul class="live-search-list dropdown-menu scrollable-menu" id="toggle-thingy">
            {% for company in active_companies %}
                <li>
                    <a class="dropdown-item" href="#company_{{ company[0] }}">
                        {{ company[1] }}
                    </a>
                </li>
            {% endfor %}
            {% for complex in company_complex %}
                <li>
                    <a class="dropdown-item" href="#P{{ complex[2] }}">
                        {{ complex[3] }}
                    </a>
                </li>
            {% endfor %}
        </ul>
    </form>

使用这个JS：

jQuery(document).ready(function($){
/* Searches List Items */
$('.live-search-list li').each(function(){
$(this).attr('data-search-term', $(this).text().toLowerCase());
});

$('.live-search-box').on('keyup', function(){

var searchTerm = $(this).val().toLowerCase();

    $('.live-search-list li').each(function(){

        if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
            $(this).show();
        } else {
            $(this).hide();
        }

    });

});

});

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("toggle-thingy").classList.toggle("show");
}

这个CSS：

.live-search-list {
    position: absolute;
    margin-left: 10px;
    margin-right: 10px;
    top: 100%;
    left: 0;
    z-index: 1000;
    /*display: inline-block;*/
    float: left;
    min-width: 10rem;
    padding: 0 0;
    font-size: 0.875rem;
    color: #263238;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #cfd8dc;
}
.live-search-box {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25;
    color: #607d8b;
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.live-search-list li {
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

.show {display:inline-block;}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

Answer 1

编辑现代时代： 请不要再使用以下解决方案了！这样做是因为当时没有为Bootstrap 4更新令人难以置信的bootstrap-select插件库。它现在有！它比我的hacky解决方案更好。

我解决了。我采用了默认的Bootstrap 4下拉列表，如：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

并将其修改为：

<div class="dropdown nav-item">
    <input 
        class="dropdown-toggle form-control live-search-box" 
        id="quicksearch" 
        data-toggle="dropdown" 
        aria-haspopup="true" 
        aria-expanded="false" 
        placeholder="Company/Complex Name" 
        style="width: 250px;">
    <div class="dropdown-menu live-search-list" aria-labelledby="dropdownMenuButton">
        {% for company in active_companies %}
        <li>
            <a class="dropdown-item" href="#company_{{ company[0] }}">
                        {{ company[1] }}
                    </a>
        </li>
        {% endfor %} {% for complex in company_complex %}
        <li>
            <a class="dropdown-item" href="#P{{ complex[2] }}">
                        {{ complex[3] }}
                    </a>
        </li>
        {% endfor %}
    </div>
</div>

如果你很难跟进，我就是这样做的。

我将<button>变为<input>，删除了班级btn和btn-secondary以及type="button"，将班级live-search-box添加到<input>和类live-search-list到<div class="dropdown menu">（因此它可以运行搜索功能，我将在下面显示以防万一）。然后我将<a>包裹在<li>中，以便搜索能够看到它们。然后我添加了＆＃39; nav-item＆＃39;对于父母，因为我将使用这个（你不需要这样做）。 {%%}只是填充此下拉列表的python循环的jinja格式。对于<li>的硬编码列表，它可以正常工作。

你有它。 Bootstrap 4的功能可搜索下拉列表。

过滤下拉列表的JS <li>搜索功能。

jQuery(document).ready(function($){
/* Searches List Items */
$('.live-search-list li').each(function(){
$(this).attr('data-search-term', $(this).text().toLowerCase());
});

$('.live-search-box').on('keyup', function(){

var searchTerm = $(this).val().toLowerCase();

    $('.live-search-list li').each(function(){

        if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
            $(this).show();
        } else {
            $(this).hide();
        }

    });

});

});

Answer 2

尝试替换此功能，因为我找不到包含MH_INLINE_SIZED_EXACT属性的li。

data-search-term

可搜索的Bootstrap下拉列表

2 个答案: