title: How to create an autocomplete search box in bootstrap?
body: <p>I am making a form for a web application and wanted to add a search bar component that can allow the user to autocomplete their search from a list. I am unable to integrate the HTML, JS, and CSS code together within the same HTML file.</p>
  <p>Here is my code for the form:</p>
  <pre><code>&lt;div align=&quot;center&quot;&gt;
      &lt;div class=&quot;col-sm-6&quot;&gt;
          &lt;div class=&quot;card shadow-lg rounded-lg&quot; style=&quot;background-color: rgb(29, 151, 252);&quot;&gt;
              &lt;div class = &quot;card-body&quot;&gt;
                      &lt;form method=&quot;POST&quot;&gt;
                          &lt;br /&gt;
                          &lt;h3 align=&quot;center&quot;, style=&quot;color: white;&quot;&gt;Upload New Video&lt;/h3&gt;
                          &lt;br /&gt;
                          &lt;div class=&quot;form-group&quot;&gt;       
                              &lt;input 
                              type=&quot;text&quot; 
                              class=&quot;form-control&quot; 
                              id=&quot;title&quot; 
                              name=&quot;title&quot; 
                              placeholder=&quot;Enter Video Title&quot;/&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;form-group&quot;&gt;       
                              &lt;input 
                              type=&quot;text&quot; 
                              class=&quot;form-control&quot; 
                              id=&quot;url&quot; 
                              name=&quot;url&quot; 
                              placeholder=&quot;Enter Video URL&quot;/&gt;
                          &lt;/div&gt;
                          &lt;br /&gt;
                          &lt;script&gt;
                              const basicAutocomplete = document.querySelector('#search-autocomplete');
                                  const data = ['One', 'Two', 'Three', 'Four', 'Five'];
                                  const dataFilter = (value) =&amp;gt; {
                                  return data.filter((item) =&amp;gt; {
                                      return item.toLowerCase().startsWith(value.toLowerCase());
                                  });
                                  };
  
                                  new mdb.Autocomplete(basicAutocomplete, {
                                  filter: dataFilter
                                  });
                          &lt;/script&gt;
                          &lt;style&gt;
                              .input-group {
                                  width: auto;
                              }
  
                              .input-group input,
                              .input-group .form-notch,
                              .input-group .form-notch-trailing {
                                  border-top-right-radius: 0 !important;
                                  border-bottom-right-radius: 0 !important;
                              }
  
                              .input-group button {
                                  border-top-left-radius: 0 !important;
                                  border-bottom-left-radius: 0 !important;
                              }
                          &lt;/style&gt;
                          &lt;div align=&quot;center&quot;&gt;
                              &lt;div class=&quot;input-group&quot;&gt;
                                  &lt;div id=&quot;search-autocomplete&quot; class=&quot;form-outline&quot;&gt;
                                  &lt;input type=&quot;search&quot; id=&quot;form&quot; class=&quot;form-control&quot;&gt;
                                  &lt;label class=&quot;form-label&quot; for=&quot;form&quot;&gt;Search&lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
                                  &lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div align=&quot;center&quot;&gt;
                              &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Please let me know where I can position my script and style tags in order for the search bar to look like this:
  <a href="https://i.stack.imgur.com/m1LeV.png" rel="nofollow noreferrer">desired search bar</a></p>