Делаем простой поиск на PHP, jQuery, MySql

12-10-21 root Php 4

Сегодня мы сделаем поиск, который поможет посетителям вашего сайта найти нужную информацию.

Лучший способ удержать своих посетителей на сайте — это дать им возможность найти то, что они хотят. Если вы сделаете эту возможность простой и красивой, они обязательно вернутся на сайт и найдут нужную информацию.

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

Мы создадим 2 файла: search.php — он будет содержать HTML форму и javascript, и do_search.php — в этом файле будет алгоритм поиска.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>PHP, jQuery Поиск</title>
    <link rel="stylesheet" type="text/css" href="my.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">

    $(function() {

        $(".search_button").click(function() {
            // получаем строку, которую ввел пользователь
            var searchString    = $("#search_box").val();
            // формируем поисковый запрос
            var data            = 'search='+ searchString;

            // если введенная информация не пуста
            if(searchString) {
                // вызов ajax
                $.ajax({
                    type: "POST",
                    url: "do_search.php",
                    data: data,
                    beforeSend: function(html) { // действие перед отправлением
                        $("#results").html('');
                        $("#searchresults").show();
                        $(".word").html(searchString);
                   },
                   success: function(html){ // действие после получения ответа
                        $("#results").show();
                        $("#results").append(html);
                  }
                });
            }
            return false;
        });
    });
    </script>

    </head>
    <body>
        <div id="container">
            <div style="margin:20px auto; text-align: center;">
                <form method="post" action="do_search.php">
                    <input type="text" name="search" id="search_box" class='search_box'/>
                    <input type="submit" value="Search" class="search_button" /><br />
                </form>
            </div>
            <div>
                <div id="searchresults">Search results for <span class="word"></span></div>
                <ul id="results" class="update">
                </ul>
            </div>
        </div>
    </body>
</html>

Это обычная html форма, которая будет отправлять запрос файлу do_search.php методом POST. Код файла do_search.php:

<?php
//если мы получили что-то через $_POST
if (isset($_POST['search']))
{
    // включим соединение с базой
    include('db.php');
    $db = new db();
    // всегда фильтруйте входящую информацию, чтобы обойти SQL инъекции
    $word = mysql_real_escape_string($_POST['search']);
    // формирование поискового запроса к базе
    $sql = "SELECT title, url FROM pages WHERE content LIKE '%" . $word . "%' ORDER BY title LIMIT 10";
    // получение результатов
    $row = $db->select_list($sql);
    if(count($row)) 
    {
        $end_result = '';
        foreach($row as $r)
        {
            $result = $r['title'];
            // выделим найденные слова
            $bold = '<span class="found">' . $word . '</span>';
            $end_result .= '<li>' . str_ireplace($word, $bold, $result) . '</li>';
        }
        echo $end_result;
    }
    else
    {
        echo '<li>No results found</li>';
    }
}
?>

В комментариях к коду описан процесс поиска. Если в базе найдется информация, мы покажем её пользователю, выделив найденные слова.

CSS

body{ font-family:Arial, Helvetica, sans-serif; }
*{ margin:0;padding:0; }
#container { margin: 0 auto; width: 600px; }
a { color:#DF3D82; text-decoration:none }
a:hover { color:#DF3D82; text-decoration:underline; }
ul.update { list-style:none;font-size:1.1em; margin-top:10px }
ul.update li{ height:30px; border-bottom:#dedede solid 1px; text-align:left;}
ul.update li:first-child{ border-top:#dedede solid 1px; height:30px; text-align:left; }
#flash { margin-top:20px; text-align:left; }
#searchresults { text-align:left; margin-top:20px; display:none; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#000; }
.word { font-weight:bold; color:#000000; }
#search_box { padding:4px; border:solid 1px #666666; width:300px; height:30px; font-size:18px;-moz-border-radius: 6px;-webkit-border-radius: 6px; }
.search_button { border:#000000 solid 1px; padding: 6px; color:#000; font-weight:bold; font-size:16px;-moz-border-radius: 6px;-webkit-border-radius: 6px; }
.found { font-weight: bold; font-style: italic; color: #ff0000; }
h2 { margin-right: 70px; }

Таким образом мы создали простую поисковую форму для показа результатов без перезагрузки страницы.

Смотрите также

4 Комментария

Alex says:

08.02.2014 в 10:00 пп

Выложите db.php плз)

Ответить
1. root says:
  
  09.02.2014 в 8:57 дп
  
  Здравствуйте! Исходники поправлены 🙂
  
  Ответить
Александр says:

07.05.2014 в 5:59 дп

а как сделать поиск с доп параметрами(допустип есть еще одно поле с селектом)?
как передать их? что нужно дописать в javascript?

Ответить
Berezhnyk says:

10.05.2014 в 12:41 пп

У меня почему-то не ищет кириличные слова

Ответить