title: Python: How to create a auto complete search bar from list of countries in a JSON file with flask?
body: <p>I have a simple JSON file which has a list of country names, and a simple HTML page with just an input box and a submit button. When a user types in a country, it just returns the country name back to the user, How would I go about creating an autocomplete search bar with the list of countries I have in my JSON file, allowing the user to know what countries are available to search?</p>
  <p>I was thinking, as the user types the 3rd letter of the country and drop down menu with related countries display under the search bar.</p>
  <p>*.json</p>
  <pre><code>{
      &quot;flags&quot;: [
  {
   &quot;country&quot;: [
    {
     &quot;name&quot;: &quot;Afghanistan&quot;,
     &quot;flag&quot;: &quot;https://s3.amazonaws.com/images.wpr.com/flag-pages/png250/af.png&quot;
    },
    {
     &quot;name&quot;: &quot;Åland Islands&quot;,
     &quot;flag&quot;: &quot;https://s3.amazonaws.com/images.wpr.com/flag-pages/png250/ax.png&quot;
    },
    {
     &quot;name&quot;: &quot;Albania&quot;,
     &quot;flag&quot;: &quot;https://s3.amazonaws.com/images.wpr.com/flag-pages/png250/al.png&quot;
    },
    {
     &quot;name&quot;: &quot;Algeria&quot;,
     &quot;flag&quot;: &quot;https://s3.amazonaws.com/images.wpr.com/flag-pages/png250/dz.png&quot;
    }
  {
  
  </code></pre>
  <p>*.html</p>
  <pre><code>
  &lt;div class=&quot;background&quot; &gt;
           &lt;h1 id=&quot;MainTitle&quot;&gt;INFO EARTH&lt;/h1&gt;
           &lt;div id=&quot;main&quot; class=&quot;form-group&quot;&gt;
              &lt;form action=&quot;#&quot; method=&quot;POST&quot;&gt;
                 &lt;div id='Wrapper' class=&quot;card-body&quot;&gt;
                    &lt;input type=&quot;text&quot; name=&quot;UI&quot;  id=&quot;textbox&quot; class=&quot;form-control&quot;  placeholder = &quot;Enter a country...&quot;&gt;
                    &lt;div id=&quot;button&quot;&gt;
                       &lt;button id=&quot;click&quot; type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;search&quot; &gt;
                          &lt;p id='headingText'&gt;&lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;&lt;/p&gt;
                       &lt;/button&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/form&gt;
              {% block content %}
              {% endblock %}
              &lt;br&gt;
           &lt;/div&gt;
           {% block data%}
           {% endblock%}
        &lt;/div&gt;
  
  </code></pre>