title: Searchable Bootstrap Dropdown
body: <p>So I'm trying to create a searchable list of links to divs that a user could use to quickly jump to that location on the page. This is using Flask and Bootstrap.</p>
  
  <p>I successfully built a dropdown to do this, but it isn't searchable. </p>
  
  <pre><code>&lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
         aria-haspopup="true" aria-expanded="false"&gt;
          Quick Scroll
      &lt;/a&gt;
      &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
          {% for company in active_companies %}
              &lt;a class="dropdown-item" href="#company_{{ company[0] }}"
                 role="button"&gt;
                  {{ company[1] }}
              &lt;/a&gt;
          {% endfor %}
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I've tried <a href="http://silviomoreto.github.io/bootstrap-select/" rel="nofollow noreferrer">Bootstrap-Select</a>, but I can't seem to get the library to load properly. Maybe a Bootstrap 4 issue, maybe Flask, maybe me. I tried loading <a href="http://semantic-ui.com/modules/dropdown.html" rel="nofollow noreferrer">Semantic UI's dropdown module</a> (and refactoring to avoid any conflicts), but that didn't work either. So I set out to put one together on my own.</p>
  
  <p>I've got this going right now. The dropdown is visible upon clicking the input box and closes upon clicking the input box. <strong>If I could just get it to close upon a click elsewhere I would be content.</strong> But my attempts to use window.onclick have failed.</p>
  
  <p>If you could point me towards a Bootstrap implementation that would work, or see a flaw in what I'm doing (of which I'm sure there are countless) let me know.</p>
  
  <pre><code>    &lt;form class="form-inline my-2 my-lg-0"&gt;
          &lt;input onclick="myFunction()" type="text" class="live-search-box" placeholder="Company/Complex"/&gt;
          &lt;ul class="live-search-list dropdown-menu scrollable-menu" id="toggle-thingy"&gt;
              {% for company in active_companies %}
                  &lt;li&gt;
                      &lt;a class="dropdown-item" href="#company_{{ company[0] }}"&gt;
                          {{ company[1] }}
                      &lt;/a&gt;
                  &lt;/li&gt;
              {% endfor %}
              {% for complex in company_complex %}
                  &lt;li&gt;
                      &lt;a class="dropdown-item" href="#P{{ complex[2] }}"&gt;
                          {{ complex[3] }}
                      &lt;/a&gt;
                  &lt;/li&gt;
              {% endfor %}
          &lt;/ul&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Using this JS:</p>
  
  <pre><code>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 &gt; 0 || searchTerm.length &lt; 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");
  }
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>