Javascript 可搜索引导下拉列表

所以我试图创建一个可搜索的div链接列表，用户可以使用它快速跳转到页面上的那个位置。这是使用烧瓶和引导

我成功地建立了一个下拉列表来实现这一点，但它是不可搜索的

<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>

---

尝试用此函数替换，因为我没有发现您的li包含

数据搜索项

属性

  $('.live-search-box').keyup(function(){
   var searchTerm = $(this).val().toLowerCase();
    $('.live-search-list li').each(function(){
     var text = $(this).text().toLowerCase(); //Trythis
        (text.indexOf(valThis) !== -1) ? $(this).show() : $(this).hide();            
   });
  });

---

尝试用此函数替换，因为我没有发现您的li包含

数据搜索项

属性

  $('.live-search-box').keyup(function(){
   var searchTerm = $(this).val().toLowerCase();
    $('.live-search-list li').each(function(){
     var text = $(this).text().toLowerCase(); //Trythis
        (text.indexOf(valThis) !== -1) ? $(this).show() : $(this).hide();            
   });
  });

---

为现代编辑： 请不要再使用下面的解决方案！之所以这样做，是因为当时Bootstrap4的难以置信的插件库还没有更新。现在有了！这比我的黑客解决方案要好得多。

我解决了。我使用了默认的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>

---

为现代编辑： 请不要再使用下面的解决方案！之所以这样做，是因为当时Bootstrap4的难以置信的插件库还没有更新。现在有了！这比我的黑客解决方案要好得多。

我解决了。我使用了默认的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>

---

您是否尝试过

select2

？不，我会尝试一下

select2

？不，我会尝试一下

数据搜索项在渲染时添加
数据搜索项在渲染时添加
<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>

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();
        }

    });

});

});