Google Places API自动填充-如何在下拉菜单中显示“无结果”

时间:2018-10-09 19:55:06

标签: javascript html css google-places-api

<script type="text/javascript">
function initialize() {
    var options = {types: ['(cities)'], componentRestrictions: {country: "us"}};
    var input = document.getElementById('searching');
    var autocomplete = new google.maps.places.Autocomplete(input, options);

    google.maps.event.addListener(autocomplete, "place_changed", function() {
        document.getElementById('searching').value = "";
        $('#stat-boxes').hide();
        var place = autocomplete.getPlace().formatted_address;
        var getcityinfo = $.get('/cities', place).done(function(res){
            res = JSON.parse(res);
            var number_sites = (res[0]["count"]);
            var Min_height = (res[0]["min_height"]);
            var Max_height = (res[0]["max_height"]);
            if( number_sites > 0 ){
                $('#num-locations').text(number_sites);
                $('#location-text').text(place);
                if( Min_height && Max_height ){
                    $('#min-max-heights').text(Min_height+"' - "+Max_height+"'");
                } else {
                    $('#min-max-heights').text('Not available');
                }
                $('#stat-boxes').fadeIn();
            } else {
                alert('No results');
            }
    <div class="carousel-wrapper">
        <div class="carousel carousel-slider pic-carousel" style="height: 830px;">
            <div class="over-pic carousel-fixed-item center" style="z-index: 1">
                <div class="carousel-control-prev" id="btnPrev"> </div>
                <div class="carousel-control-next" id="btnNext"> </div>
                <input type="text" id="searching">
                <div class="choice-words">
                    <div class="headline">Hello, Welcome to SmallCellSite.com</div>
                    <div class="headline-sub">The largest marketplace for wireless broadband attachments in the US.</div>
                </div>
            </div>
            <div class="carousel-item white-text" href="#two!">
                <img src="/img/welcome/scs-home-02.jpg">
            </div>
            <div class="carousel-item white-text" href="#three!">
                <img src="/img/welcome/scs-home-03.jpg">
            </div>
            <div class="carousel-item white-text" href="#four!">
                <img src="/img/welcome/scs-home-04.jpg">
            </div>
            <div class="carousel-item white-text" href="#one!">
                <img src="/img/welcome/scs-home-01.jpg">
            </div>
        </div>
        <div id="stat-boxes" class="stat-boxes-wrapper">
            <div class="stat-box">
                <div class="stat-box-header"><h4>Locations</h4></div>
                <span class="num-locations" id="num-locations">xxx</span>
                <span class="location-text">Assets located in and around</span>
                <span class="location-text" id="location-text">Houston, TX</span>
                <a href="#" class="stat-boxes-link">Municipality Features</a>
            </div>
            <div class="stat-box stat-box-middle">
                <div class="stat-box-header"><h4>Details</h4></div>
                <span class="num-locations" id="min-max-heights">15'-65'</span>
                <span class="location-text">Heights of assets in your search results</span>
                <a href="#" class="stat-boxes-link">Power + Fiber availability</a>
            </div>
            <div class="stat-box"></div>
        </div>
    </div>

我创建了一个Google Places自动填充搜索框,用户只能在其中搜索美国城市。一切正常,但现在我想按照以下步骤创建新功能。

假设用户在搜索栏中输入乱码,例如“ ejnfwniefewfneinenfwenefjnew”,由于无法进行匹配,当前搜索框停止显示任何位置。但是,当发生这种情况时,我希望我的下拉列表仅显示一行显示消息-“未找到匹配项”。我怎样才能做到这一点。我读了很多问题,但似乎没有人要求添加这样的功能。

有人可以解释如何做到这一点,并使用Javascript和HTMl在代码中重新创建吗?

我没有添加自动完成搜索代码,因为它相当笼统,并且与Google Maps网站上的示例基本相同。

0 个答案:

没有答案