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

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

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

classified.tdd

<?php

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

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

$params['isMultiRec'] = true;
$params['part']['limit'] = 10;
$params['search']['atBeginning'] = true;
$params['search']['searchFields'] = array(1,2);

classified.tpl

<?php
# Форма поиска
if (!isset($_GET['ajaxSrc'])) # Не выводить, если запрос идет через Ajax
{
    # Инициализация функции Blox.ajax()
    Router::addToHead($GLOBALS['bloxUrl'].'/style/ajax.js');

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

echo "<div id='ajaxDst'>";
# Вывод записей. Эта часть динамично изменяется при вводе текста в форму
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('searchField').value;

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

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

См. также

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