<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网站上的示例基本相同。