PHP/Javascript - Мгновенный поиск, но отличается?

Question

PHP/Javascript - Мгновенный поиск, но отличается?

У меня есть страница с пустой строкой поиска, а затем куча контактов под ней в таблице. Каждый контакт - это одно деление.

Я хочу иметь возможность фильтровать таблицу контактов, как текст вводится в строке поиска. (Так, например, если бы в строке поиска было введено "Fran", вы бы увидели только контакты с "Fran" в их имени. И тогда все вернулось бы к значению по умолчанию, если "Fran" был удален.)

Это возможно? Как? (Я нашел руководство по поиску, но оно работало только так, как Google, с выпадающим списком под строкой поиска.)

1

javascript php instant google-instant

Источник

user550590 19 янв '11 в 05:15

4 ответа

Другие вопросы по тегам javascript php instant google-instant

user555384 19 янв '11 в 05:24 2011-01-19 05:24 · Answer 1 · 2011-01-19 05:24

Я бы предложил использовать этот плагин jquery, он не требует ajax или взаимодействия с сервером, он просто фильтрует визуализированную таблицу в соответствии с содержимым поля ввода при каждом нажатии клавиши.

Не забудьте также включить библиотеку jquery в ваш проект вместе с этим плагином, чтобы это работало.

user580618 19 янв '11 в 09:19 2011-01-19 09:19 · Answer 2 · 2011-01-19 09:19

Вот несколько примеров Javascript для вас:

<script type="text/javascript">
$(document).ready(function() {
    $("#search").keyup(function() {
        // Get the search value
        var searchValue = $(this).val();

        // If no value exists then show all divs
        if(searchValue === "") {
            $(".your_div").show();
            return;
        }

        // Initially hide all divs
        $(".your_div").hide();

        // Now show any that contain the search value
        $(".your_div:contains('" + searchValue + "').show();
    }); 
}); 
</script>

user472134 19 янв '11 в 05:24 2011-01-19 05:24 · Answer 3 · 2011-01-19 05:24

Вы можете попробовать jQuery автозаполнение плагин для того же

0

Источник

user472134 19 янв '11 в 05:24

user580816 19 янв '11 в 06:29 2011-01-19 06:29 · Answer 4 · 2011-01-19 06:29

Следующее содержит базовую логику, которая вам нужна, хотя она и обратная - она скрывает содержимое, которое находит, и только для точных совпадений. Кроме того, это событие нажатия клавиш, поэтому оно скрывает элементы div только после того, как вы нажмете пробел после ввода имени, так что вам тоже нужно будет это настроить. Чтобы искать совпадения в длинной строке текста, вам нужно будет использовать некоторое регулярное выражение для проверки строки поиска.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Search</title>
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <script>            
        $(document).ready(function(){
                $(".searchbox").keypress(function(){
                      $("div").each(function(){
                    if($(this).text() == $(".searchbox").val()){
                        $(this).hide("fast");
                    };
                      });
                });
            });
    </script>
    </head>
    <body>
    <form><input type="text" class="searchbox"></form>
        <div>Susan</div>
        <div>Fran</div>
        <div>Dave</div>
    </body>
    </head>
</html>