Наша группа по DLE в Telegram Любой товар на сайте можно получить бесплатно
ajax поиск

Пример живого поиска на ajax


Реализуем небольшой поиск по MySql на ajax.
  • Описание
  • Скриншоты
  • Обновления
  • Теги
  • ?
  • Комментарии 203
ajax поиск

Недавно реализовал клиенту живой поиск на лендинге и решил поделиться скриптом.
 

Как работает живой поиск

При вводе в input слова, начинает искать в базе данных похожие выражения.
В скрипте я настроил так, что при вводе двух символов и более, начинается поиск и выдача результатов.
При клике на результат, он попадает в поле поиска, а сам результат скрывается и поле деактивируется.
 
Скрипт можно сделать под себя при необходимости. Ничего сложного.
 

index.html

В нём подключаем только библиотеку ajax и наш скрипт search.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/search.js"></script>
 
Стили:
<style>
   .search{
   position:relative;
}
.search_result{
    background: #FFF;
    border: 1px #ccc solid;
    width: 100px;
    border-radius: 4px;
    max-height:100px;
    overflow-y:scroll;
    display:none;
}
.search_result li{
    list-style: none;
    padding: 5px 10px;
    margin: 0 0 0 -40px;
    color: #0896D3;
    border-bottom: 1px #ccc solid;
    cursor: pointer;
    transition:0.3s;
}
.search_result li:hover{
    background: #F9FF00;
}
</style>
 
И сам html:
<input type="text" name="referal" placeholder="Живой поиск" value="" class="who"  autocomplete="off">
<ul class="search_result"></ul>
 

Файл search.js

$(function(){
    
//Живой поиск
$('.who').bind("change keyup input click", function() {
    if(this.value.length >= 2){
        $.ajax({
            type: 'post',
            url: "search.php", //Путь к обработчику
            dаta: {'referal':this.value},
            response: 'text',
            success: function(data){
                $(".search_result").html(data).fadeIn(); //Выводим полученые данные в списке
           }
       })
    }
})
    
$(".search_result").hover(function(){
    $(".who").blur(); //Убираем фокус с input
})
    
//При выборе результата поиска, прячем список и заносим выбранный результат в input
$(".search_result").on("click", "li", function(){
    s_user = $(this).text();
    //$(".who").val(s_user).attr('disabled', 'disabled'); //деактивируем input, если нужно
    $(".search_result").fadeOut();
})
})
 

Обработчик запросов search.php

<?php
define("DB_HOST","localhost");
define("DB_NAME",""); //Имя базы
define("DB_USER",""); //Пользователь
define("DB_PASSWORD",""); //Пароль
define("PREFIX",""); //Префикс если нужно
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
$mysqli -> query("SET NAMES 'utf8'") or die ("Ошибка соединения с базой!");
if(!empty($_POST["referal"])){ //Принимаем данные
    $referal = trim(strip_tags(stripcslashes(htmlspecialchars($_POST["referal"]))));
    $db_referal = $mysqli -> query("SELECT * from ".PREFIX."search WHERE name LIKE '%$referal%'")
    or die('Ошибка №'.__LINE__.'<br>Обратитесь к администратору сайта пожалуйста, сообщив номер ошибки.');
    while ($row = $db_referal -> fetch_array()) {
        echo "\n<li>".$row["name"]."</li>"; //$row["name"] - имя поля таблицы
    }
}
?>
 
У кого будут вопросики, спрашивайте, не стесняйтесь.
Комментариям всегда рад.
 
Внимание
 Это самый простой пример живого поиска, который не рекомендуется использовать на своих сайтах.
 Как минимум нужно сделать кучу проверок, а ещё лучше сделать всё на PDO а не на mysqli, что бы обеспечить безопасность.
 Любой профи сможет с лёгкостью взломать сайт или базу и вытащить секретные данные.
 Все взломы происходят в основном через поиск.

Скачать пример живого поиска
Live_search.rar Загрузок: 4148 [2 Kb]
Поблагодарить автора 

Добавить комментарий
  1. +1

    Владимир Тальянский

    Отличная штука, спасибо!
    Изменил по-мелочи по своему вкусу - добавил в выводе вариантов цену, окно сделал поверх через z-index, но напрягает одна штука, которую победить так и не смог. Если посетитель начал вводить что-то в поле запроса, окно вариантов появилось, но тут человек передумал искать, а окно так просто не закрывается. Подскажите пожалуйста, что дописать в js, чтобы при выходе курсора мыши за границы окошка оно закрывалось (или при клике в области вне окошка - даже не знаю как лучше).
    10 февраля 2016 09:50 Ответить
    1. 0

      Kylaksizov

      Спасибо за Ваш комментарий.
      По клику вне элемента, посмотрите пожалуйста эту стать "клик вне элемента" тут хорошо всё описано, если уже не разберётесь сами, то помогу, не вопрос.
      И тут можете посмотреть помощь по jquery.
      10 февраля 2016 09:55 Ответить
      1. 0

        Владимир Тальянский

        Спасибо! С кликом вне элемента получилось сделать. А вот со схлопыванием по перемещению курсора за границы окна так и не одолел....
        10 февраля 2016 12:22 Ответить
        1. 0

          Kylaksizov

          Если я правильно понял вопрос, то нужно добавить метод mouseout.
          Если не то, то подробнее напишите задачу.
          10 февраля 2016 12:25 Ответить
          1. 0

            Владимир Тальянский

            Хотелось бы, чтобы окошко с вариантами закрывалось при выходе курсора за его границы. Человек набрал несколько букв, появилось окошко с вариантами, он смещается вниз, ходит по вариантам, но если курсор мыши уходит за границы, то окошко схлопывается.
            Я попробовал тупо вместо mouseup поставить mouseout - работает, но не так, как хотелось - набираю несколько букв в поле поиска - появляется окно с вариантами, но при попытке переходе на него вниз оно исчезает(((
            10 февраля 2016 12:38 Ответить
            1. 0

              Kylaksizov

              $("body").on("mouseout", ".search_result", function(){
                 $(this).fadeOut(300);
              })

              Ой, изменил, сейчас правильно)))
              10 февраля 2016 12:41 Ответить
  2. 0

    saintroma

    Какие права давать пользователю к БД?
    29 января 2016 02:18 Ответить
    1. 0

      Kylaksizov

      На чтение точно. Не знаю, я всегда ставлю по умолчанию.
      29 января 2016 08:27 Ответить
  3. 0

    Игорь

    добрый день,
    помогите плиз разобраться с ошибкой №17
    сайт klepa-i-misha com
    сделал по инструкции все.
    19 января 2016 12:18 Ответить
    1. 0

      Kylaksizov

      Помог...
      19 января 2016 15:49 Ответить
    2. 0

      Роман

      Сделай для .search_result {position: absolute; z-index:9999;} Так будет лучше
      28 января 2016 20:05 Ответить
      1. 0

        Kylaksizov

        Я делал на пустой странице. А тем кто ставит на сайт, тем будет лучше, ты прав. Тут править не буду, я написал как можно меньше кода, что бы было более понятно.
        28 января 2016 20:17 Ответить
    3. 0

      Игорь

      Добрый день, тоже вылетает ошибка #17 как решили эту проблему? Спасибо.
      8 февраля 2019 00:11 Ответить
  4. +1

    Дмитрий

    Наконец-то работающий код! СПАСИБО!!! :)
    25 декабря 2015 10:22 Ответить
    1. 0

      Kylaksizov

      Пожалуйста
      25 декабря 2015 10:29 Ответить
  5. +1

    evgennova

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

    1. вывод не только наименования, но и цены, артикулы, картинки (смотря для каких сайтов).

    2. добавить в код ограничение по выводу и сортировка по... (ORDER BY name LIMIT 15) кол-ва результатов, с дополнительным выводом фразы "просмотреть все" (то что не вошло в лимит поисковых результатов).

    3. при отсутствии найденных результатов выводить информацию ("поиск ничего не дал", "повторите ввод символов", ....и т.п.)

    4. добавить возможность исчезновения результатов поиска когда мышь не в фокусе или хотя бы по средствам кнопки "esc" (а то бывает что пользователь передумал что то искать, а результат висит как банный лист).

    5. добавить возможность перемещаться с помощью кнопок клавиатуры по найденным результатам (вверх, вниз).

    6. самое главное что бы можно было бы добавить, так это возможность при поиске выбирать части вводимых слов, а именно по разным (не по порядку) выбором слов в наименовании, например - ("Электрочайник Delonghi KBZ 2001.GY Scultura Collection") можно было бы его найти по написании фразы в поиске "Delonghi Scultura" - что то вроде автодополнения, т.е. после нажатия на пробел появляется возможность поиска уточнений в уже найденных товарах...

    P.S. парочку таких скриптов нашел, но при подключении работали каждый по своему некорректно....
    18 декабря 2015 21:28 Ответить
    1. +1

      Kylaksizov

      Советы дельные, но я как раз специально написал проще простого, что бы как можно меньше возникало вопросов у тех, кто никогда не делал этого.
      Можно сделать сколько угодно проверок, лимит и т.д., но это уже каждому индивидуально.
      25 декабря 2015 10:31 Ответить
      1. 0

        evgennova

        цена вопроса улучшения по пункту №6?

        P.S. пункты 3,4,5 - не особо проблемные (есть даже другой код со всем выше перечисленным кроме 6 пункта)
        С 6 пунктом искал готовый код но ничего целостного не нашел, очень много нужно подпиливать и подставлять - пока не силен в этом, и забросил до лучших времен :-) ... )
        25 декабря 2015 18:29 Ответить
        1. 0

          Kylaksizov

          В принципе ничего сложного тут нет, просто обработка будет чуть дольше. Но для человеческого глаза это не заметно.
          Цену на сайте я не обсуждаю. Скайп у Вас мой есть по моему.
          25 декабря 2015 18:38 Ответить
      2. 0

        Nicolas

        Правильно сделали, не должно быть ничего лишнего, вы создали базу, а все остальное - индивидуальные потребности каждого.
        24 августа 2016 17:35 Ответить
  6. 0

    Ярослав

    Скрипт отличный!!! Но вот не подскажите ли, как сделать, что бы результат поиска выводился?
    18 декабря 2015 15:32 Ответить
    1. 0

      Kylaksizov

      Спасибо Ярик.
      Так поиск же итак выводит сразу результат.
      Детальней напишите пожалуйста...
      18 декабря 2015 15:34 Ответить
      1. +1

        Ярослав

        Всё разобрался уже сам. Спасибо!
        18 декабря 2015 17:43 Ответить
        1. 0

          Гость Александр

          напишите решение
          21 августа 2017 10:56 Ответить
          1. 0

            Kylaksizov

            Какое решение написать? Как выводить результат поиска? Так он по умолчанию итак выводится. Если у Вас не работает, значит Вы что-то не так подключили.
            21 августа 2017 11:49 Ответить
  7. +2

    Денис

    Решено :)
    Дело было в моих "ровных" руках. Спасибо Владимиру Куласкизову за этот сайт.
    Второе - спасибо за своевременные коментарии в которых он отвечал на вопросы (пусть даже самые неадекватные)
    Третье - сам поиск по сайту (живой поиск) который написал Вова очень крут!
    Четвертое - оказалось мне этот поиск не подойдет, потому, что я использую чистый HTML+CSS+javascript (не использую CMS и базы данных, все делаю руками...)
    Пятое - спасибо Вове за то, что он НАСТОЯЛ на том, что бы я слез с тотал командера и начал использовать Файл зилу (Вова - действительно быстрее и удобнее спасибо)

    И в итоге, хорошо, что есть сайты на которых реально актуальная информация (в данном случае рабочий скрипт живого поиска для сайта). И очень хорошо, что вот так просто можно обычному человеку (далекому от программирования) задать вопрос, получить ответ, да еще и автор сайт перезвонит тебе в скайп и несмотря на свою загруженность просто по человекчески поможет все установить и расскажет.
    Вова - ты хороший программист и видимо отличный человек. Спасибо за твою работу и твой сайт!
    9 декабря 2015 08:00 Ответить
    1. 0

      Kylaksizov

      Денис, спасибо за такой отзыв :D
      Не перехвали ))) Я просто постоянно в сети, поэтому помочь 5 минут не составляет большого труда.
      Одно дело помочь и подсказать, другое сделать за кого-то работу.
      Спасибо ещё раз, красочно)
      9 декабря 2015 08:08 Ответить
      1. 0

        Роман

        Приветствую, Владимир.

        Скрипт полезный! Все работает (подключаюсь к базе, идет живой поиск).
        Но при клике мышкой на варианте из появившегося списка (<li>) поле (input) не заполняется выбранным значением (((

        Как исправить? Подскажите, пожалуйста.
        13 декабря 2015 19:27 Ответить
        1. 0

          Kylaksizov

          Спасибо Роман.
          В файле search.js нужно раскомментировать строку.
          //При выборе результата поиска, прячем список и заносим выбранный результат в input
           $(".search_result").on("click", "li", function(){
              s_user = $(this).text();
              $(".who").val(s_user).attr('disabled', 'disabled'); // эту строку, а если инпут ненужно деактивировать, то уберите это .attr('disabled', 'disabled')
              $(".search_result").fadeOut();
          })

          Отпишите, как результат.
          13 декабря 2015 19:30 Ответить
          1. +1

            Роман

            Да, все ok !!!

            Огромное спасибо.
            13 декабря 2015 19:53 Ответить
            1. 0

              Kylaksizov

              Вам спасибо, что уделили время моему сайту и моим скриптам :)
              13 декабря 2015 19:54 Ответить
          2. 0

            Максим

            Здравствуйте! Все работает, раскоментировал строку и данные подставляются в поле, но их нельзя редактировать, как это исправить?

            Все нашел!!! Разобрался просто убрал .attr('disabled', 'disabled') и готово
            4 мая 2017 11:22 Ответить
  8. +1

    Денис

    Спасибо! Но есть вопросы.

    1) достаточно ли прав на чтение БД для работы данного поиска ?

    2) просто УМОЛЯЮ - помогите создать таблицу.
    Зашёл в панель MSQL - и в моей БД таблиц не обнаруженно. А как я понял нужна таблица...
    7 декабря 2015 02:08 Ответить
    1. 0

      Kylaksizov

      Добрый день Денис.
      1. это Вы сами уже назначаете права, по умолчанию должно быть всё настроено.
      2. Сделайте запрос в базу такой:
      CREATE TABLE `search`(`name` TEXT character set utf8 collate utf8_general_ci NOT NULL)

      Создание таблиц в БД
      7 декабря 2015 08:59 Ответить
      1. 0

        Денис

        Спасибо, но выдает ошибку
        Warning: mysqli::mysqli(): php_network_getaddresses: getaddrinfo failed: hostname nor servname provided, or not known in/home/izba161/onitut.ru/docs/search.phpon line9
        7 декабря 2015 14:59 Ответить
        1. 0

          Kylaksizov

          Если я не ошибаюсь, то это говорит о том, что скрипт не может соединиться с БД, т.е. неверный хост-сервер скорей всего.
          7 декабря 2015 15:06 Ответить
          1. 0

            Денис

            define("DB_HOST","izba161.nichost.ru");
            define("DB_NAME","izba161_db"); //Имя базы
            define("DB_USER","izba161_mysql"); //Пользователь
            define("DB_PASSWORD","nSAieV5_"); //Пароль
            define("PREFIX",""); //Префикс если нужно

            вроде все правильно сделал....
            не работает.

            Автор - дело могарычевое - и дело принципа. помоги пожалуйста заставить. его работать.
            мой скайп ivashovdo - или как с тобой связаиься ?
            8 декабря 2015 05:26 Ответить
            1. 0

              Kylaksizov

              Добавился, жду
              8 декабря 2015 07:39 Ответить
  9. +1

    Anon

    Подскажите пожалуйста, как лучше всего будет прикрутить loader к этому всему? Т.е, во время выполнения запроса к серверу и выборки, чтобы пользователю показывалась картинка загрузки данных
    19 ноября 2015 16:09 Ответить
    1. 0

      Kylaksizov

      Всё просто. Перед ajax запросом показываете уже готовую картинку loader.gif например. А после запроса, вернее когда возвращается дата, скрываем этот loader и всё.
      19 ноября 2015 16:14 Ответить
  10. +1

    evgennova

    Офигенный код от профи.
    Даже помог подпилить на мой корявый движок.
    Спасибо автору !
    6 октября 2015 20:20 Ответить
    1. 0

      Kylaksizov

      Спасибо, рад был помочь.
      6 октября 2015 20:23 Ответить

Оставить комментарий

В корзине: 0 шт.

на сумму: 0

Всего: 0

Оформить заказ Очистить корзину