title: Adding Bootstrap 4 Searchable Dropdown in Google Apps Script
body: <p>So I have been trying to use Bootstrap-select to add a search feature in my dropdown menu for Google Apps Script.</p>
  <p>I tried following <a href="https://developer.snapappointments.com/bootstrap-select/" rel="nofollow noreferrer">this guide</a>, and added the cdn and js available <a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/" rel="nofollow noreferrer">here</a>, but I cant seem to get it working in my Google Apps Script Webapp. All I am getting is a dropdown with no option to serach.</p>
  <p>Below is my code, can someone please tell me what am I doing wrong?</p>
  <p>uform.html:</p>
  <pre><code>        &lt;!doctype html&gt;
      &lt;html lang=&quot;en&quot;&gt;
        &lt;head&gt;
          &lt;!-- Required meta tags --&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      
          &lt;!-- Bootstrap CSS --&gt;
          &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl&quot; crossorigin=&quot;anonymous&quot;&gt;
      
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css&quot; integrity=&quot;sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO&quot; crossorigin=&quot;anonymous&quot;&gt;
      
        &lt;/head&gt;
        &lt;body&gt;
        
          &lt;div class=&quot;container&quot;&gt;
            &lt;ul class=&quot;nav nav-tabs&quot; id=&quot;myTab&quot; role=&quot;tablist&quot;&gt;
            &lt;li class=&quot;nav-item&quot; role=&quot;presentation&quot;&gt;
          &lt;button class=&quot;nav-link active&quot; id=&quot;home-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#home&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;home&quot; aria-selected=&quot;true&quot;&gt;Home&lt;/button&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot; role=&quot;presentation&quot;&gt;
          &lt;button class=&quot;nav-link&quot; id=&quot;sales-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#sales&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;sales&quot; aria-selected=&quot;false&quot;&gt;Sales&lt;/button&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot; role=&quot;presentation&quot;&gt;
          &lt;button class=&quot;nav-link&quot; id=&quot;purchase-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#purchase&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;purchase&quot; aria-selected=&quot;false&quot;&gt;Purchase&lt;/button&gt;
        &lt;/li&gt;
         &lt;li class=&quot;nav-item&quot; role=&quot;presentation&quot;&gt;
          &lt;button class=&quot;nav-link&quot; id=&quot;contact-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#contact&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;contact&quot; aria-selected=&quot;false&quot;&gt;Contact Details&lt;/button&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class=&quot;tab-content&quot; id=&quot;myTabContent&quot;&gt;
        &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;home&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;home-tab&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;tab-pane fade&quot; id=&quot;sales&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;sales-tab&quot;&gt;
          
          &lt;br&gt;&lt;h3 class=&quot;display-6&quot;&gt;New Sales Case&lt;/h3&gt;
      
          &lt;div class=&quot;col-md-4&quot;&gt;
          &lt;select class=&quot;selectpicker&quot; data-live-search=&quot;true&quot; aria-label=&quot;.form-select-sm example&quot; id=&quot;inputSales-CaseOwner&quot;&gt;
         
          &lt;/select&gt;
          &lt;/div&gt;
      
          &lt;br&gt;&lt;h5&gt;Contact Details&lt;/h5&gt;
      
          &lt;form class=&quot;row g-3&quot;&gt;
             &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;label for=&quot;inputSales-CxName&quot; class=&quot;form-label&quot;&gt;Search with Phone Number&lt;/label&gt;
              &lt;select class=&quot;selectpicker&quot; data-live-search=&quot;true&quot; aria-label=&quot;Default select example&quot; id=&quot;inputSales-CxName&quot;&gt;
            
              &lt;/select&gt;
             &lt;/div&gt;
  
   &lt;/form&gt;
         &lt;br&gt;&lt;div&gt;
          &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; id=&quot;save-button-contact&quot;&gt;Save&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
      
      
      &lt;/div&gt;
  
  
      &lt;!-- Optional JavaScript; choose one of the two! --&gt;
  
      &lt;!-- Option 1: Bootstrap Bundle with Popper --&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
      &lt;!-- Option 2: Separate Popper and Bootstrap JS --&gt;
      &lt;!--
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js&quot; integrity=&quot;sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      --&gt;
     &lt;script&gt;
  function afterFormLoadsSalesCaseOwner(){
  
        google.script.run.withSuccessHandler(afterSalesDropdownReturned).getSalesCaseOwnerDropdown();
  
      }
  
      function afterSalesDropdownReturned(arrayOfArrays){
        var item = document.getElementById(&quot;inputSales-CaseOwner&quot;);
  
        arrayOfArrays.forEach(function(r){
          var option = document.createElement(&quot;option&quot;);
          option.textContent = r[0];
          item.appendChild(option);
  
        });
  
  
      }
  document.addEventListener(&quot;DOMContentLoaded&quot;,afterFormLoadsSalesCaseOwner);
  &lt;/script&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot; integrity=&quot;sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js&quot; integrity=&quot;sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>functions.gs:</p>
  <pre><code>function getSalesCaseOwnerDropdown(){
  
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName(&quot;CaseOwners&quot;);
  return ws.getRange(2, 1, ws.getLastRow()-1, 1).getValues();
  
  }
  </code></pre>
  <p>What my Result Looks Like:</p>
  <p><a href="https://i.stack.imgur.com/wKqh0.png" rel="nofollow noreferrer">Screenshot from Webapp</a>
  I need a search box in this.</p>
  <p>Thanks in advance!</p>