Удалить текст автозаполнения при щелчке вне поля

Я только что закончил добавлять панель поиска на свою страницу. Почти все работает нормально, однако я бы хотел, чтобы автоматические предложения исчезали после нажатия за пределами поля. Как бы я это сделал? Я использую 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>';
    }
}
?>

javascript search jquery autosuggest
person Darron Donaldson    schedule 19.09.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я знаю 99% решение. 100% решение немного сложнее.

Добавьте onclick в тело, которое закроет всплывающее окно. Но это означает, что всякий раз, когда вы щелкаете в любом месте, даже во всплывающем окне, оно закрывается. Вот почему вы должны добавить onclick к всплывающему элементу, который будет cancelBubble():

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

Это гарантирует, что событие onclick остановится и никогда не попадет в обработчик onclick тела.

Это решение на 99%. Это не идеально, потому что, когда у вас одновременно открыты 2 всплывающих окна, щелкнув одно, вы ожидаете, что другое закроется, но, конечно, этого не произойдет.

100% решение будет включать в себя глобальный трекер, который отслеживает все всплывающие окна и закрывает те, которые не были нажаты. Я еще не нашел хорошего оправдания, чтобы зайти так далеко.

person Halcyon    schedule 19.09.2013
comment
Спасибо, но не смог заставить это работать. Я решил попробовать автозаполнение Jquey и, кажется, работает отлично. Подключил его к базе данных mysql и все в порядке. Спасибо, в любом случае! - person Darron Donaldson; 21.09.2013