列表處於活動狀態時不顯示自動提示

嘿，我需要你的幫助。我向輸入搜索字段添加了一個隱藏列表。當您單擊輸入字段時將打開列表，並在您單擊除列表之外的其他任何位置時關閉該列表。例如，如果您單擊「蒙特哥貝」，它將被添加到輸入字段中，並替換該字段中的當前文本。列表處於活動狀態時不顯示自動提示

不過，我有兩個問題：

我也有一個谷歌地圖自我暗示搜索領域內工作。如果我的隱藏列表未激活，如何才允許Google自動建議只在搜索字段中彈出？

的谷歌自動提示腳本：

$(function() { google.maps.event.addDomListener(window,"load",function(){new google.maps.places.Autocomplete(document.getElementById("HotelsPlacesEan"))}); }); var loading = false;

我怎麼能隱藏列表如果失去焦點？（如果我設置

$(".input").on("focusout", function() { 
    $(".suggest-content").addClass("hiddd"); 
})

，列表中不添加文本搜索字段，當我點擊它，而是關閉它被添加之前列表

輸入：

<input required id="HotelsPlacesEan" name="city" type="search" class="form input-lg RTL search-location deleteoutline opensuggest" placeholder="<?php echo trans('026'); ?>" value="<?php echo $themeData->selectedCity; ?>" required />

列表：

<div class="suggest-div"> 
     <span class="suggest-content hiddd"> 
      <ul class="liststyle"> 
       <li class="whylist"><b>Popular Destinations</b></li> 
       <li class="suggest"><a class="selectlink" href="">Montego Bay</a></li> 
       <li class="suggest"><a class="selectlink" href="">Negril</a></li> 
       <li class="suggest"><a class="selectlink" href="">Ocho Rios</a></li> 
       <li class="suggest"><a class="selectlink" href="">Kingston</a></li> 
       <li class="suggest" style="border-bottom:0px;"><a class="selectlink" href="">Port Antonio</a></li> 
      </ul> 
     </span> 
     </div>

CS S：

<style> 

a.selectlink { 
    padding-left: 10px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    display: block; 
} 

a.selectlink:hover { 
    color: #fff; 
} 

ul.liststyle { 
    margin-top: 0px; 
} 

li.whylist { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    background-color: #ddd; 
    color: #000; 
    padding-left: 10px; 
    font-size: 15px; 
    font-weight: 100; 

} 

li.suggest { 
    border-bottom: 1px solid #ddd; 
    font-size: 15px; 
    font-weight: 100; 
} 

li.suggest:hover { 
    background-color: #515B62; 
    color: #fff; 
} 

.suggest-div { 
    position: absolute; 
    width: 100%; 
} 

span.suggest-content { 
    display: block; 
    background-color: #fff!important; 
    margin-top: 0px; 
    line-height: 1.2; 
    position: absolute; 
    width: 100%; 
    z-index: 999; 

} 

span.suggest-content:focus { 

display: none; } 

.hiddd { 
    display: none!important; 
} 

.form {font-weight: 100!important;} 
</style>

腳本：

<script type="text/javascript"> 
$(".selectlink").click(function(e) { 
    e.preventDefault(); 
    $("#HotelsPlacesEan").val($(this).text()); 
}); 

$(".opensuggest").click(function() { 
    $(".suggest-content").toggleClass("hiddd"); 

}); 

$(".input").on("focusout", function() { 
    $(".suggest-content").addClass("hiddd"); 
}) 

</script>

這是谷歌自動提示的在名單問題截圖：

我會很感激，如果你能幫助我！在此先感謝:)

來源

2017-04-07 Max Scho

請您談一下輸入搜索欄，但不顯示任何在你的HTML。你在搜索字段中提到谷歌自動完成彈出（=你稱之爲輸入元素!!）那麼它在哪裏真正彈出？在#HotelsPlacesEan？它在哪裏？顯示所有需要的html標記。如果你有一個小提琴..顯示它。至於問題2：焦點在點擊之前觸發！一種解決方案是將addClass行放入超時。 – yezzz

嘿，謝謝你的回答！我完全忘記添加輸入，抱歉。現在已經完成了！也許你可以幫助我？ –

1：我不能幫你沒有一個工作的例子，而不知道所需的行爲。你說：當你的「隱藏列表不活躍」？當輸入不重點時會出現這種情況？當然，那不是當你想顯示谷歌結果？也許你想顯示谷歌的建議，如果你自己的腳本沒有任何建議？

2：建議使用超時，以便建議保持可點擊。

$("input").on("focusout", function() { 
    setTimeout(function() { 
    $(".suggest-content").addClass("hiddd"); 
    }, 250); 
});

其他方式可以是：

，而不是點擊，用鼠標按下事件，不及時滅火。但你將不得不檢查觸摸支持
委派事件：創建一個輸入和下拉菜單的包裝，然後在該包裝器上偵聽傳播的焦點。點擊的建議將成爲活動目標。從那裏你可以做一些事情，比如設置輸入值。

這裏的工作的例子，有些東西玩：https://jsfiddle.net/m3r72hnx/

來源

2017-04-07 22:26:48 yezzz

列表處於活動狀態時不顯示自動提示

回答

相關問題