Populate search box with autocomplete suggestion based on drop down list

Question

I am trying to create a search box with a drop-down menu. So far I have managed to do that. My code is:

<div id="form_input_things">
<p>
    Search Type:<select id="searchtype" name="searchtype">
            <option value="country">Country</option>
            <option value="city">City</option>
    </select>
    </p>
    <p>
    <div class="form-group">
    Search Term:<input type="text" name="searchterm" id="myMessage" placeholder="Search term" data-toggle="tooltip" data-placement="bottom" title="Search by Country name,City name"  onkeyup='check()'>&nbsp;&nbsp;&nbsp;<input class ="btn btn-primary" type="submit" id="submitid" value="Submit" disabled>
    <script type="text/javascript">
        $("input[type=text]").keyup(function(){
            var count = 0, attr = "disabled", $sub = $("#submitid"), $inputs = $("input[type=text]");  
            $inputs.each(function(){
                count += ($.trim($(this).val())) ? 1:0;
            });
            (count >= $inputs.length ) ? $sub.removeAttr(attr):$sub.attr(attr,attr);
            });
    </script>
    </div>
    </p>
    <p>&nbsp;</p>
</div>

But now the hard part comes, I want to populate search box with a suggested name based on the selection of drop-down menu (list of country name or city name). How can I do that? I don't want to load the data in my HTML template (because it will make slower to load the page) but want to get all country or city name from my own list (more than 1000s city name). Looking forward to your kind help.

Answer 1

The most difficult part of what you're asking is getting a list of cities and ensuring that you're displaying the cities from that specific country/state/province. I personally would suggest using Google Maps' API and adapting it to what you need. See this Link: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete#try-it-yourself