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 に答える