Dynamically change index

[Alex Kaszynski]

The docsSearchBar works great! However, I'd like to dynamically change the index:

        <div class="col-md-18">
          <input type="search" placeholder="docs-searchbar input" class="form-control search-input" id="q" autofocus />
        </div>

        <select id="indexUidSelector" style="margin-left: 20px;">
          <option value="all">All</option>
          <option value="something">Something Else</option>
        </select>

      </div>

    <script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@2.4.1/dist/cdn/docs-searchbar.min.js"></script>

    <script>
      docsSearchBar({
          hostUrl: 'http://localhost:7700',
          apiKey: '<redacted>',
          indexUid: 'all',
          inputSelector: '.search-input',
          debug: true,
          enhancedSearchInput: true,
          enableDarkMode: 'auto'
      })

Is there a way to do this?

[Alex Kaszynski]

Asked too soon. Here's how you do it:

    <script>
      let theSearchBar = docsSearchBar({
          hostUrl: 'http://localhost:7700',
          apiKey: '<redacted>',
          indexUid: 'all',
          inputSelector: '#q',
          debug: true, // Set debug to true if you want to inspect the dropdown
          enhancedSearchInput: true,
          enableDarkMode: 'auto'
      })

      // Add event listener to the select element
      document.getElementById('indexUidSelector').addEventListener('change', function() {
          theSearchBar.indexUid = this.value;
          theSearchBar.inputSelector = '#docs-searchbar-suggestion';
      });

Note that here we go back to using the CSS element '#q' instead of accessing by class name. This matches the example for docsSearchBar.

[cvermand]

Thanks for posting your solution :)