Blox CMS — система для разработки, сборки и управления сайтом

Пример: поиск с использованием Ajax

Функциональные возможности поисковой формы сайта можно улучшить, сделав поиск "живым". Пользователь начинает вводить фразу, и мгновенно отображаются результаты. Это действительно довольно удобно.

У нас будет простой блок с двумя текстовыми данными и поисковая форма с одним полем. Все подробности читайте в комментариях к коду.

classified.tdd

<?php

$titles[1] = 'Заголовок объявления';
$titles[2] = 'Текст объявления';

$types[1] = 'varchar(200)';
$types[2] = 'varchar(1000)';

$params['multi-record'] = true;
$params['part']['limit'] = 10;
$params['search']['where'] = 'beginnings';
$params['search']['fields'] = [1,2];

classified.tpl

<?php
# Форма поиска
if (!Blox::ajaxRequested()) # Выводить, если запрос идет не через Ajax
{
    # Инициализация функции Blox.ajax()
    Blox::addToHead(Blox::info('cms','url').'/assets/blox.ajax.js');

    # Форма ввода поискового текста
    echo "
    <form action='?page=$page&block=$block' method='post'>
        <input
            type='text' name='search[1]'
            id='search-field'
            onkeyup='ajaxFunc($block)'
            value='{Request::get($block, 'search', 'texts', 1)}'
        >
        # Когда Javascript отключен, команда на поисковый запрос делается через эту кнопку
        <input type='submit' value='Найти'>
    </form>
    ";
}

echo "<div id='ajax-dst'>";
# Вывод записей. Эта часть динамично изменяется при вводе текста в форму
foreach ($tab as $dat)
{
    echo "
    {$dat['edit']}
    <h3>$dat[1]</h3>
    <div>$dat[2]</div>
    <br />
    ";
}
echo "<div>";

classified.js


function ajaxFunc(block)
{
    // Извлечем поисковый текст из поля searchField
    var searchText = document.getElementById('search-field').value;

    // Закодируем для страховки поисковый текст, так как он будет передаваться через URL
    searchText = encodeURI(searchText);

    // С помощью Ajax получим код блока и поместим его в элемент шаблона ajaxDst
    Blox.ajax('?block='+block+'&s='+searchText, 'ajax-dst');
}

См. также

Кодирование URL