Главная страница>Связанные с программированием>Другой исходный код
Скачать

Живой поиск AJAX

*** Больше не поддерживается *** Я начал этот проект несколько лет назад, но на данный момент многое изменилось. Кроме того, из-за связи между различными уровнями и старыми технологиями (jQuery!) этот проект не является масштабируемым. Большое спасибо за поддержку, но, к сожалению, мне придется заархивировать этот проект :(

AJAX Live Search — это плагин jQuery/форма поиска PHP, которая выполняет поиск и отображает результат по мере ввода, аналогично функции автозаполнения Google.

Демо

Проверьте это в действии.

Поддержка браузера

IE 8+ ✔ Хром ✔ Фаерфокс ✔ Опера ✔ Сафари ✔

Спасибо BrowserStack и JetBrains за поддержку этого проекта.

Начало работы с Ajax Live Search

Запуск текущего примера в index.php , включая создание фиктивной базы данных и таблицы, не должен занять больше 7 минут. Но потребуется больше, если вам понадобится интегрировать его в существующий проект. Чтобы добиться этого, предполагая, что у вас есть это текстовое поле:

<input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ...">

  1. Скопируйте папки, включая core , css , font , img , js и templates в свой проект.

  2. Укажите необходимые конфигурации, особенно конфигурации базы данных, в core/Config.template.php и переименуйте файл в Config.php . Этот файл содержит все внутренние настройки плагина, которые описаны в таблице конфигураций PHP.

  3. Включите js/ajaxlivesearch.min.js или js/ajaxlivesearch.js и css/ajaxlivesearch.min.css или css/ajaxlivesearch.css на свою страницу.

  4. Измените URL-адрес Access-Control-Allow-Origin header в core/AjaxProcessor.php на URL-адрес вашего проекта. В настоящее время это https://ajaxlivesearch.com .

  5. Убедитесь, что core/Handler.php и core/Config.php включены в вашу (PHP) страницу, и в самом верху файла есть эти строки (проверьте index.php ): 

     use AjaxLiveSearchcoreConfig;
use AjaxLiveSearchcoreHandler;

if (session_id() == '') {
    session_start();
}

$handler = new Handler();
$handler->getJavascriptAntiBot();

  6. Наконец, подключите плагин к текстовому полю и передайте необходимые параметры (loaded_at и токен):

jQuery("#ls_query").ajaxlivesearch({ loading_at: , token: getToken() . "'"; ?>, max_input: , }); ```

При необходимости вы также можете отправить на сервер дополнительные параметры. Для этого вам следует добавить атрибуты data во входные данные поиска: 

 <input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ..." data-additionalData="hello world!">

Например, в этом случае вы можете получить доступ к атрибуту данных в PHP следующим образом: 

 // key is transformed to lowercase
$additionalData = $_POST['additionaldata'];

Параметры jQuery

Имя Тип Необходимый Описание
загруженный_at Целое число Да Это используется для предотвращения поиска ботов.
жетон Нить Да Это используется для предотвращения атаки CSRF.
URL Нить Нет По умолчанию: ajax/process_livesearch.php.
кэш логическое значение Нет Имеется в виду кэширование запросов Ajax. По умолчанию: ложь
form_anti_bot Нить Нет По умолчанию: ajaxlivesearch_guard
слайд_скорость Нить Нет По умолчанию: быстро
type_delay Целое число Нет По умолчанию: 350
max_input Целое число Нет По умолчанию: 20
min_chars_to_search Целое число Нет Минимальная длина символов для начала поиска. По умолчанию: 0
диапазон_страниц Множество Нет По умолчанию: [0, 5, 10]
page_range_default Целое число Нет По умолчанию: 5
form_anti_bot_class Нить Нет По умолчанию: ls_anti_bot
footer_class Нить Нет По умолчанию: ls_result_footer
следующая_страница_класс Нить Нет По умолчанию: ls_next_page
предыдущая_страница_класс Нить Нет По умолчанию: ls_previous_page
предел_страницы Нить Нет По умолчанию: page_limit
result_wrapper_class Нить Нет По умолчанию: ls_result_div
result_class Нить Нет По умолчанию: ls_result_main
контейнер_класс Нить Нет По умолчанию: ls_container
класс_страницы Нить Нет По умолчанию: нумерация страниц
form_class Нить Нет По умолчанию: поиск
загруженный_в_классе Нить Нет По умолчанию: ls_page_loaded_at
token_class Нить Нет По умолчанию: ls_token
current_page_hidden_class Нить Нет По умолчанию: ls_current_page
current_page_lbl_class Нить Нет По умолчанию: ls_current_page_lbl
последняя_страница_lbl_class Нить Нет По умолчанию: ls_last_page_lbl
total_page_lbl_class Нить Нет По умолчанию: ls_last_page_lbl
page_range_class Нить Нет По умолчанию: ls_items_per_page
класс_навигации Нить Нет По умолчанию: навигация
стрелка_класс Нить Нет По умолчанию: стрелка

Пользовательское событие

Имя
onResultClick
onResultEnter
onAjaxComplete

Пример: 

 jQuery(".mySearch").ajaxlivesearch({
    loaded_at: <?php echo time(); ?>,
    token: <?php echo "'" . $handler->getToken() . "'"; ?>,
    max_input: <?php echo Config::getConfig('maxInputLength'); ?>,
    onResultClick: function(e, data) {
        // get the index 1 (second column) value
        var selectedOne = jQuery(data.selected).find('td').eq('1').text();

        // set the input value
        jQuery('#ls_query').val(selectedOne);

        // hide the result
        jQuery("#ls_query").trigger('ajaxlivesearch:hide_result');
    },
    onResultEnter: function(e, data) {
        // do whatever you want
        // jQuery("#ls_query").trigger('ajaxlivesearch:search', {query: 'test'});
    },
    onAjaxComplete: function(e, data) {

    }
});

Пользовательский триггер

Имя
ajaxlivesearch:hide_result
ajaxlivesearch:поиск

Конфигурации PHP

Имя Тип Необходимый Описание
Источники данных Множество Да Источник данных для каждого текстового поля поиска. Ключи относятся к полю HTML id. В настоящее время поддерживаются MySQL и mongoDB (находится в бета-версии).

Конфигурации источника данных MySQL:
Имя Тип Необходимый Описание
хозяин Нить Да Хост базы данных MySQL. Обычно это «localhost».
база данных Нить Да Имя базы данных MySQL.
имя пользователя Нить Да Имя пользователя базы данных MySQL.
проходить Нить Да Пароль имени пользователя базы данных MySQL.
стол Нить Да Таблица базы данных MySQL, в которой выполняется поиск в режиме реального времени.
поиск по столбцам Множество Да Столбцы поиска, в которых выполняется поиск в реальном времени. Их может быть один или несколько. например массив('имя_столбца_1', 'имя_столбца_2')
заказать по Нить Нет Столбец, в котором упорядочен результат.
Направление заказа Нить Нет Направление заказа: «ASC» или «DESC» для «orderBy». Значение по умолчанию: ASC
фильтрРезультат Множество Нет Столбцы, которые должны быть в результате. Если он пуст, будут возвращены все столбцы.
Оператор сравнения Нить Да Оператор сравнения поисковых запросов. Возможные значения операторов сравнения: «LIKE» и «=».
шаблон поиска Нить Да Это используется для указания способа поиска запроса. возможные значения: `q`, `*q`, `q*`, `*q*`.
с учетом регистра Нить Да Чувствительность к регистру поисковых запросов
МаксРезультат Целое число Нет Это используется для ограничения максимального количества результатов.
дисплейхедер Множество Нет Используется для отображения или скрытия заголовка в результате. Если для параметра «активно» установлено значение «истина», отображается заголовок. Кроме того, можно сопоставить столбцы с разными заголовками.
тип Нить Да Тип источника данных. В настоящее время возможные значения: «mysql» или «mongo».
антиБот Нить Да Это используется в качестве метода безопасности для предотвращения отправки форм теми ботами, которые не используют JavaScript. В этом методе скрытое поле заполняется этим значением с помощью jQuery. Оно может иметь любое значение, но оно ДОЛЖНО совпадать с параметром form_anti_bot, переданным в плагин jQuery. По умолчанию установлено значение «ajaxlivesearch_guard».
поискStartTimeOffset Целое число Да Это используется для еще одного метода защиты от ботов. Некоторые боты сразу отправляют форму после завершения загрузки страницы. Однако людям требуется больше времени, чтобы заполнить поле. По умолчанию этот параметр установлен на 3 секунды. Назначать более 3 секунд не рекомендуется.
МаксИнпутДлингс Целое число Да Это определяет максимальную длину символов в поле поиска.
шаблон Нить Да Это указывает имя шаблона, расположенное в папке шаблонов.

Часто задаваемые вопросы

  • Каков риск отключения anti_bot и токена?

    form_anti_bot — хорошая функция безопасности, но ее можно удалить. Для этого вам необходимо изменить validateRequest() в core/AjaxProcessor.php и удалить $_POST['ls_anti_bot'] , а также verifySessionValue($sessionParameter, $sessionValue) в core/Handler.php . Напротив, удаление token позволяет любому создать форму и использовать ваш сервер в качестве источника данных, поэтому это не рекомендуется. В настоящее время каждый раз, когда загружается страница/форма поиска, новый токен генерируется путем вызова getToken() на странице формы ( index.php в текущем примере). Затем токен и анти_бот проверяются с verifySessionValue($sessionParameter, $sessionValue) при поиске/отправке нового запроса на сервер. Если вам это кажется излишним, в getToken() верните тот же токен для существующего сеанса.

  • Как столбец можно скрыть в результате?

    Этого можно добиться в вашем шаблоне. Пример можно найти в templates/hiddenColumn.php

Лицензия

Лицензия MIT

Если хочешь, купи мне половину кофе!

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все