使用基于下拉列表的自动完成建议填充搜索框答案

【问题标题】：Populate search box with autocomplete suggestion based on drop down list使用基于下拉列表的自动完成建议填充搜索框
【发布时间】：2018-02-05 20:35:15
【问题描述】：

我正在尝试创建一个带有下拉菜单的搜索框。到目前为止，我已经设法做到了。我的代码是：

<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>

但是现在困难的部分来了，我想根据下拉菜单的选择（国家名称或城市名称列表）填充一个建议名称的搜索框。我怎样才能做到这一点？我不想在我的 HTML 模板中加载数据（因为加载页面会变慢），但想从我自己的列表中获取所有国家或城市名称（超过 1000 个城市名称）。期待您的帮助。

【问题讨论】：

标签： javascript html drop-down-menu search-box

【解决方案1】：

您要询问的最困难的部分是获取城市列表并确保您显示的是来自该特定国家/州/省的城市。我个人建议使用 Google Maps 的 API 并根据您的需要进行调整。见此链接：https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete#try-it-yourself

【讨论】：