главная

Теги:


Простой поиск при помощи PHP, jQuery и MySQL

Лучший способ удержать пользователя на сайте, это позволить ему найти, то что он ищет. Если вы делаете для этого удобную систему, то уровень предпочтения вашего сайта будет расти и пользователь обязательно вернётся для того, чтобы найти то, что его интересует.

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

Я создам 2 файла: search.php, который будет содержать HTML и JavaScript. Второй файл, do_search.php будет содержать PHP код. Приступим к созданию первого файла:

 




PHP, jQuery search demo







Попробуйте ввести слово ajax


Результаты для

В этом файле мы создали обычную HTML форму, которая посылает POST запрос в бэк энд – файлу do_search.php.

select_list($sql);
    if(count($row)) {
        $end_result = '';
        foreach($row as $r) {
            $result         = $r['title'];
            $bold           = '' . $word . '';
            $end_result     .= '
  • ' . str_ireplace($word, $bold, $result) . '
  • '; } echo $end_result; } else { echo '
  • По вашему запросу ничего не найдено
  • '; } } ?>

    PHP код содержит комментарии, по которым вы с лёгкостью сможете понять работу скрипта. Если в базе данных нашлись совпадения, вы показываете их вашему пользователю, выделяя жирным те слова, которые искал пользователь.

    Придадим всему этому немного 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; }
    

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

    Источник урока: www.codeforest.net/simple-search-with-php-jquery-and-mysql

    Урок Создан:2011-05-23 Просмотров:3035

    Добавить комментарий:

    
    Copyright© 2009 Hosted by Zhost