列表处于活动状态时不显示自动提示

嘿，我需要你的帮助。我向输入搜索字段添加了一个隐藏列表。当您单击输入字段时将打开列表，并在您单击除列表之外的其他任何位置时关闭该列表。例如，如果您单击“蒙特哥贝”，它将被添加到输入字段中，并替换该字段中的当前文本。列表处于活动状态时不显示自动提示

不过，我有两个问题：

我也有一个谷歌地图自我暗示搜索领域内工作。如果我的隐藏列表未激活，如何才允许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

列表处于活动状态时不显示自动提示

回答

相关问题