0

我刚刚在我的页面中添加了一个搜索栏。几乎一切正常，但是，我希望在字段外单击后自动建议消失。我该怎么做？我正在使用 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>';
    }
}
?>
4

1 回答 1

0

我知道一个 99% 的解决方案。100％的解决方案涉及更多。

添加一个onclick将关闭弹出窗口的正文。但这意味着无论何时单击任何位置，即使是在弹出窗口上，它也会关闭。这就是为什么你应该onclick在弹出元素上添加一个cancelBubble()：

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

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

这是 99% 的解决方案。这并不完美，因为当您一次打开 2 个弹出窗口时，单击一个，您会期望另一个关闭，但它当然不会。

100% 的解决方案将涉及一个全局跟踪器，该跟踪器跟踪所有弹出窗口并关闭未点击的弹出窗口。我还没有真正找到充分的理由走这么远。

于 2013-09-19T16:21:23.953 回答