Динамически поисковый фильтр на базе JQUERY и PHP

Содержание:

Настройка базы данных
Внешний вид таблицы
JQUERY
PHP
Ресурсы

В прошлом, запрос данных для фильтрации был немного громоздким. Сегодня получение данных стало намного проще благодаря AJAX и JQuery. Перед фильтрацией данных, участвует GET запрос для того, чтобы обновить страницу. Теперь мы можем в полной мере воспользоваться помощью AJAX, чтобы получить наши данные и заполнить нашу таблицу данных на основе пользовательского ввода без обновления страницы.

В этом уроке, я покажу вам, как это делается с помощью AJAX .get () метод запроса, построенном в библиотеку JQuery. Мы будем использовать PHP код для извлечения данных из базы данных и отобразим результаты данных в таблице.

Вважно иметь в виду, что это только один из способов обработки этой операции. Метод Jquery в .get () будет использован только для получения данных, а не создавать данные. Вы хотите знать, какой метод вы используете для задачи, над которой вы работаете.Ссначала хочу загрузите исходные файлы и настройки базы данных. В исходных файлов я оставил файлик, который называется customers.sql

к содержанию ↑

Настройка базы данных

Настройка базы данных на локальном компьютере или на удаленным. Затем вставьте filecustomers.sql таблицу, приведенной в исходном загрузочном пространстве.

Затем откройте файл /data/search-data.php и вводите информации о пользователе в соответствии с вашими требованиями по настройке баз данных (логин / пароль).

Внешний вид таблицы

Я использую ThemeRoller JQuery для стилизации таблицы. Тем не менее, вы можете использовать любой стиль, который подходит для вашего проекта. HTML-это довольно таки развит. Я поместил этот код в файл с именем index.php. Результаты, которые возвращаются из поискового запроса на основе следующих:

<tbody id=”results”></tbody>

Независимо от того, в какой таблице мы используем, пока у нас есть необходимое количество столбцов полевых и ID=»searchData» мы не можем передавать данные в таблицу. Ах да, и вы также должны иметь поле ввода для поиска.

Поиск: <input style="width:150px;" id="searchData" type="text">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery Search Autocomplete</title>
 
    <style type="text/css" title="currentStyle">
                @import "css/grid_sytles.css";
                @import "css/themes/smoothness/jquery-ui-1.8.4.custom.css";
    </style>
 
    <!-- jQuery libs -->
    <script  type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    <script  type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
 
    <script  type="text/javascript" src="js/jquery-search.js"></script>
 
</head>
<body>
 
<div id="container">
 
    <div id="dataTable">
 
        <div class="ui-grid ui-widget ui-widget-content ui-corner-all">
 
            <div class="ui-grid-header ui-widget-header ui-corner-top clearfix">
 
                <div class="header-left">
                    <!-- Left side of table header -->
                </div>
 
                <div class="header-right">
                    Search: <input style="width:150px;" id="searchData" type="text"></div>
                </div>
 
            <table class="ui-grid-content ui-widget-content cStoreDataTable" id="cStoreDataTable">
                <thead>
                    <tr>
                        <th class="ui-state-default">Имя</th>
                        <th class="ui-state-default">Адрес</th>
                        <th class="ui-state-default">Телефон</th>
                        <th class="ui-state-default">Емеил</th>
                    </tr>
                </thead>
                <tbody id="results"></tbody>
            </table>
            <div class="ui-grid-footer ui-widget-header ui-corner-bottom">
                <div class="grid-results">Результаты: </div>
            </div>
        </div>
    </div>
 
</div>
 
</body>
</html>

к содержанию ↑

JQUERY

Я поставил комментарии в разметке JQuery, чтобы сделать его немного легче для вашего понимания. Этот код находится в файле / JS JQuery-search.js

$(document).ready(function(){
    /*
     Устанавливаем внутреннюю HTML таблицу, сообщаем пользователю ввести поисковый запрос, чтобы начать.
Мы могли бы разместить это где-нибудь в документе. Я выбрал, чтобы поместить его
в таблице.
    */    $('#results').html('<p style="padding:5px;">Enter a search term to start filtering.</p>');
 
    /* Когда пользователь вводит значение, таких как "J" в поле поиска
* Мы запускаем функцию .get (). */    $('#searchData').keyup(function() {
 
        /* Получаем значение входного поиска каждый раз, KeyUp () метод срабатывает таким образом, что
* Может передать значение методу нашего .get () для извлечения данных из базы данных*/        var searchVal = $(this).val();
 
        /* Если searchVal вар не пуст, то проверяем базу данных для возможных результатов
* Еще показываем сообщение пользователю*/        if(searchVal !== '') {
 
            /* Горячий .get () метод и передача данные в searchVal
* search-data.php файл для поиска */            $.get('data/search-data.php?searchData='+searchVal, function(returnData) {
                /* Если returnData пуст, то выводим сообщение для пользователя
* Остальное наши возвращенные  результаты данных в таблице.  */                if (!returnData) {
                    $('#results').html('<p style="padding:5px;">Поиск не вернул никаких данных.</p>');
                } else {
                    $('#results').html(returnData);
                }
            });
        } else {
            $('#results').html('<p style="padding:5px;">Введите поисковое слово, чтобы начать фильтрацию</p>');
        }
 
    });
 
});

к содержанию ↑

PHP

Откройте файл data / search-data.php. Я поставил заметки в этом файле, чтобы помочь вам лучше понять процесс. Этот файл содержит PHP код для извлечения данных из базы данных на основе ввода пользователей в окне поиска.