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添加到将关闭弹出窗口的正文中。但这意味着无论何时单击任何地方，即使在弹出窗口中，它也会关闭。这就是为什么你应该在onclick：

的弹出元素上添加cancelBubble()

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

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

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

100％解决方案将涉及一个全局跟踪器，它跟踪所有弹出窗口并关闭未点击的弹出窗口。到目前为止，我还没有找到合理的理由。

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

1 个答案: