单击关闭字段时删除自动提示文本

Question

我刚刚在我的页面中添加了一个搜索栏。它几乎所有的工作都很好，但是，我希望在单击字段外后自动建议消失。我该怎么做呢？我使用的是HTML5，我的代码是：

$(document) .ready(function() {
    $('.autosuggest').keyup(function() {
        var search_term = $(this).val();
        $.post('search.php', {search_term:search_term}, function(data) {
            $(".result").html(data);
            $('.result li').click(function() {
                var result_value = $(this).text();
                $('.autosuggest').val(result_value);
                $('.result').html('');
            });     
        });     
    });
});


<input type="text" id="autosuggest" class="autosuggest" onBlur="removeSuggestion();"> <input type="submit" value="search">
    <div class="dropdown">
        <ul class="result"></ul>
    </div>

我不太确定是否需要我的php，但以防万一…

<?php
require_once 'connect.php';

if (isset($_POST['search_term']) == true && empty($_POST['search_term']) == false) {

    $search_term = mysql_real_escape_string($_POST['search_term']);

    $query = mysql_query("SELECT town FROM `boroughs` WHERE town LIKE '$search_term%'");

    while (($row = mysql_fetch_assoc($query)) !== false) {
        echo '<li>', $row['town'], '</li>';
    }
}
?>

Answer 1

我知道99%的解决方案。100%的解决方案会更复杂一些。

在正文中添加一个关闭弹出窗口的onclick。但这意味着，只要你点击任何地方，即使是在弹出窗口上，它也会关闭。这就是为什么应该在将cancelBubble()的popup元素上添加onclick的原因

function (event) {
    event.cancelBubble();
}

这将确保onclick事件停止，并且永远不会到达正文的onclick处理程序。

这是99%的解决方案。这并不完美，因为当你同时打开两个弹出窗口，点击其中一个，你会期望另一个关闭，但它当然不会。

100%解决方案将包括一个全局跟踪器，跟踪所有弹出窗口，并关闭未点击的弹出窗口。我还没有找到足够的理由走到这一步。