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

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

1 голос
/ 19 января 2011

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

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

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

Ответы [ 4 ]

2 голосов
/ 19 января 2011

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

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

0 голосов
/ 19 января 2011

Вот несколько примеров 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>
0 голосов
/ 19 января 2011

Ниже приведена базовая логика, которая вам нужна, хотя она и обратная - она ​​скрывает содержимое, которое находит, и только для точных совпадений.Кроме того, это событие нажатия клавиш, поэтому оно скрывает элементы 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>
0 голосов
/ 19 января 2011

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

...