Наша группа по DLE в Telegram

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

ajax поиск
Реализуем небольшой поиск по MySql на ajax.
  • Описание
  • Скриншоты
  • Обновления
  • Теги
  • ?
  • Комментарии 200
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 Загрузок: 3590 [2 Kb]
Поблагодарить автора 

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

    mnpartner

    Здравствуйте, закачал скрипт, вставил , поиск работает, но если выбрать один из результатов то сам выбранный результат не вставляется в input. как можно исправить?

    10 января 2020 13:52 Ответить
  2. 0

    Stela

    Подскажите пожалуйста.
    Вроде верно, таблица "sh_work" и колонка "sh_work_number".
    $db_referal = $mysqli -> query("SELECT * from sh_work WHERE sh_work_number LIKE '%$referal%'")
    echo "\n<li>".$row["sh_work_number"]."</li>";

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


    31 августа 2019 01:31 Ответить
    1. 0

      David

      запишите "data" английскими буквами, почему-то автор заменил в слове data "a" - на кириллице. Почему? Не понятно :)
      5 декабря 2019 20:52 Ответить
  3. +1

    Гость Андрей

    Огромное спасибо за ваш код! 
    Нужен был такой функционал, и тоска накатывала, что придется ставить большую библиотеку к сайту. Искать, где в ней что срабатывает и прочее.
    А ваш код подошел идеально (конечно, пришлось его адаптировать под проект), но основа рабочая ваша.
    14 июля 2019 07:10 Ответить
    1. 0

      Kylaksizov

      Спасибо, только этот поиск чисто пример. Нужно обязательно делать кучу проверок перед запросом.
      26 июля 2019 01:04 Ответить
  4. 0

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

    Добрый день. Как сделать регистронезависимый поиск?
    25 июня 2019 14:37 Ответить
  5. 0

    Alex

    Здравствуйте. А как сделать что бы в поле input выводилось $raw['name'], а в параметр строки, при отправки формы, отдавался $raw['id']? Спасибо.
    12 мая 2019 21:25 Ответить
    1. 0

      Kylaksizov

      Нужно переписывать скрипт.
      24 мая 2019 13:16 Ответить
  6. 0

    Veronica

    Здравствуйте!
    Спасибо за скрипт! Но есть вопрос, почему при вводе одной буквы в поиске скрипт отправляет 2, а то и 3 POST запроса? Я ставила другой скрипт "живого поиска", но не пошло в связке со слайдером slik, там всё чётко - одна буква - один запрос.
    29 апреля 2019 08:02 Ответить
    1. 0

      Kylaksizov

      Нужно убрать лишние события в js.
      $('.who').bind("keyup", function() {
      29 апреля 2019 08:04 Ответить
      1. 0

        Veronica

        Спасибо! Помогло!
        29 апреля 2019 08:22 Ответить
        1. 0

          Veronica

          Вы меня извините конечно, но теперь не срабатывает поиск если вставить мышкой слово в текстовое поле, пока не нажмёшь клавишу на клавиатуре... Если вставляешь слово с клавиатуры командой command+V то поиск работает, а вот с мышки не работает... :((( Печалька...
          29 апреля 2019 08:51 Ответить
          1. 0

            Veronica

            Вернулась к изначальному скрипту...
            Я не понимаю в скриптах от слова совсем... Скажите, ведь можно написать небольшой фильтр, ну например хранить в переменной последний отправленный стринг, а перед отправкой нового сравнивать послдений отправленный стринг с новым и если они совпадают, то пропустить отправку...
            Как то напрягает куча запросов на БД...
            29 апреля 2019 18:50 Ответить
  7. 0

    Денис

    Здравствуйте ,касательно postgressql...подключение осуществляются в начальном index.php ,касательно обычного поиска без скрипта "живого" все работает , но что касается скрипта , так сразу как только набираешь второй символ и далее начинает выдавать ошибку в консоли 
    POST https://адрес сайти/адрес перехода/файл в котором все 403 (Forbidden), для теста все расположил сначала в одном файле убрал url из скрипта( с ним тоже не работает, если на этот же файл). Так как поиск по базе осуществляется (при нажатии интер), как я понял к базе подключение имеетсяю.
    27 февраля 2019 13:45 Ответить
  8. 0

    Гость Николай

    Здравствуй(те) )) 
    У меня проблема с подключением. Вроде бы работает но как только напечатаю любые две буквы, вывод идет корявый
    цитирую "
    • query("SELECT * from music WHERE name LIKE '%$referal%'") or die('err'); while ($row = $db_referal -> fetch_array()) { echo "\n
    • ".$row["title"]."
    • "; } } ?>
    перед этим ругалось на первую строку с запросом на кодировку, я его убрал. но оно теперь перескочило сюда.
    Пожалуйста помоги добрый человек.
    Телеграмм : @Vassabi_v1
    25 февраля 2019 01:43 Ответить
  9. 0

    Григорий

    Всем доброго времени суток, подскажите как сделать, чтоб подхватывало все данные искомого слова, то есть остальные столбики таблицы принадлежащие искомому слову, заранее спасибо
    14 февраля 2019 18:21 Ответить
  10. 0

    SeaDeviLL

    Здравствуйте, установил на сайт все работает Автор СПАСИБО все четко и понятно, но при открытии результатов поиска выпадающая менюшка начинает отталкивать все элементы вниз, как можно подправить чтоб она выпадала поверх остальных элементов и еще почему то стили <style> у меня работают только если подключены в той же странице что строка поиска при попытке переместить их в файле со стилями style.css стили работать не хотят. И еще спрашивали про исчезновение результатов при убирании курсора с выпадающего меню, там привели строки кода :
    $("body").on("mouseout", ".search_result", function(){   $(this).fadeOut(300); })
    Можно более конкретно показать куда его поставить чтоб заработало?
    P.S. Заранее благодарен!

    Да и еще заметил такую вещь, что у меня выбор результатов поиска получается только со второго раза, т.е. первый раз кликнул вроде в input значение попало, но потом опять результаты открываются со второго раза все нормально выбирает и запоминает!
    8 февраля 2019 08:50 Ответить
    1. 0

      Kylaksizov

      Слишком много писать, проще объяснить по скайпу, скайп внизу смотрите.
      8 февраля 2019 08:58 Ответить
  11. 0

    lion

    Добрый вечер.
    Не подскажите по скрипту, изначально все работает.
    Необходимо переделать вывод echo, чтобы сразу генерировалась ссылка из полученных данных и по ней можно было перейти
    Если меняю на echo "\n<li><А хреф='./index.php?module=ports&ip=".$row["ip"]. "</А>" .$row["addresss"]."</li>";
    то выводить только одру строку, в общем ломается вывод.
    4 февраля 2019 23:18 Ответить
    1. 0

      Kylaksizov

      У Вас синтаксическая ошибка, ссылка закрывается не там где надо.
      Правильный вариант: 
      echo "\n<li><a href='./index.php?module=ports&ip=".$row["ip"]."'>" .$row["addresss"]."</a></li>";
      5 февраля 2019 11:08 Ответить
  12. 0

    Елена

    Спасибо за код! К сожалению, после выбора интересующей позиции из выпадающего списка, в input не записывается это значение. А только несколько введенных символов. Как я поняла, данный функционал реализовывает $(".who").val(s_user);
    25 ноября 2018 09:57 Ответить
  13. 0

    Роман

    Этот поиск долго время работал у меня на сайте. 
    До тех пор пока я не обрезал расширения файлов в адресной строке (удалил .php).
    После этого поиск работать перестал. Подскажите как его вернуть? 
    12 октября 2018 09:45 Ответить
    1. 0

      Kylaksizov

      На сколько я понял, Вы изменили путь. Я на словах не помогу, нужно смотреть.
      12 октября 2018 10:07 Ответить
  14. 0

    slon

    Здравствуйте, возник вопрос. После ввода в поиск, он все выводит правильно, но как сделать чтобы нажимая на результат, осуществлялся переход по id
    26 мая 2018 22:12 Ответить
  15. 0

    Вячеслав

    Отлично работает, спасибо за такой лёгкий код без тяжелых плагинов! Скажите, можно ли сделать чтобы сразу после выбора делалась отправка (без нажатия кнопки)?
    19 мая 2018 16:43 Ответить
    1. 0

      Artyom

      Да можно через keyup можно без кнопки или через blur
      29 августа 2018 00:34 Ответить
  16. 0

    12

    Здравствуйте, возник вопрос. После вставки поиска на сайт он перестает работать, а отдельно работает
    16 мая 2018 21:58 Ответить
    1. 0

      Kylaksizov

      Нужно значит разбираться в ваших скриптах...
      16 мая 2018 22:00 Ответить
  17. 0

    bass_pro

    Помогите допилить этот скрипт!

    Мне нужно чтоб выводились в вариантах поиска пример - Москва, но передавало в get из таблицы ID

    localhost/mega/?referal=Sochi+URSS Сейчас получается такой вывод через GET
    А нужен такой
    localhost/mega/?referal=1
    9 апреля 2018 19:57 Ответить
    1. 0

      Kylaksizov

      Ну вам нужно просто поиск по id, и это будет считаться обычной выборкой по полю, а не поиск. Это два разных по смыслу запроса. Например: SELECT * FROM table EHERE id = 1
      10 апреля 2018 06:17 Ответить
      1. 0

        Bass_pro

        Может я не правильно изложил мысли...=)
        Вот ссылка на скрин с схемой.
        Думаю так будет проще понять.
        10 апреля 2018 20:07 Ответить
        1. 0

          Kylaksizov

          Я получил ссылку на скрин, ненужно накидывать их по 10 штук. Не знаю чем Вам помочь. Заказывайте на фрилансе работу.
          10 апреля 2018 21:38 Ответить
  18. 0

    Дамир

    Доброго времени суток. А как-то можно добавить проверку по еще одному полю из таблицы? Мне нужен поиск клиентов пользователя. Ваш скрипт работает шикарно, но выводит клиентов всех пользователей. Хотелось бы отсечь не нужных и вывести только клиентов пользователя)
    29 марта 2018 17:52 Ответить
    1. 0

      Kylaksizov

      Вам нужно посмотреть немного уроки по SQL запросам, я не могу ничего сказать по вашему вопросу, так как не вижу код.
      10 апреля 2018 06:14 Ответить
  19. 0

    Алксандр

    Пример хороший!
    Будет ли работать на php7.1 в связке с redbean php?
    27 марта 2018 20:02 Ответить
    1. 0

      Kylaksizov

      Если правильно настроить все, то конечно будет.
      27 марта 2018 20:04 Ответить
  20. 0

    Виталий

    Добрый день.
    Все подключил все хорошо работает, но вот возникла потребность сделать такую фишку: начать поиск только если в соседнем поле
    <select> ... </select>

    вот такая html разметка
    <input type='text' name='poisk_text' value='' id='who' placeholder='Введите текст или фразу'>
    <ul class="search_result"></ul>
    <select name='kriterij_poiska' id='poisk_nulja'>
        <option value='vse_polja'>Поиск по всем полям</option>
        <option value='0'>Skolotāja</option>
    </select>

    пробовал так:
    $(function(){
        $('#poisk_nulja').change(function(e){
            var nolj = $("#poisk_nulja :selected").val();
            if (nolj = 0) {
                // тут Ваш код, но не работает
            }
        });
    });
    14 февраля 2018 02:06 Ответить
    1. 0

      Kylaksizov

      Сравнение ставится так == а не одним равно, то есть должно быть вот так:
      if (nolj == "0")
      и 0 желательно взять в кавычки, так как это строка а не число.
      14 февраля 2018 05:28 Ответить
      1. 0

        Виталий

        Спасибо помогли, но какая та мистика, вчера перепробовал все и не чего не работало, а сегодня все заработало.
        По поводу сравнения, это опечатка, а вот по поводу кавычек разве для сравнения чисел нужны кавычки?
        14 февраля 2018 22:43 Ответить
        1. 0

          Kylaksizov

          Я написал желательно. Если бы сравнивали например так ===
          15 февраля 2018 06:39 Ответить
  21. +1

    Гость Евгений

    собрал всё с нуля изначально в utf-8 и всё работает. где то была ошибка. всё отлично работает. Классный код
    2 февраля 2018 09:57 Ответить
    1. 0

      Kylaksizov

      Рад, что у Вас получилось!
      2 февраля 2018 09:59 Ответить
  22. 0

    Гость Евгений

    Добрый день!

    72partner.ru/e/search2.php
    можете ли помочь. всё работает, но только не на русском языке. причем если обратиться к странице как к обработчику то всё норм. а в выплывающем окошке не работает

    на английском и с цифрами всё идеально но не с русским текстом
    30 января 2018 13:43 Ответить
    1. 0

      Kylaksizov

      Добрый день Евгений, я пока не вижу никаких проблем, так как по результатам поиска выдает сообщение, что ничего не найдено. Может я не там смотрю. Советую изложить все подробности в этой теме https://forum.kylaksizov.ru/forum/threads/%D0%96%D0%B8%D0%B2%D0%BE%D0%B9-%D0%BF
      %D0%BE%D0%B8%D1%81%D0%BA.15/ и я с радостью Вам помогу. И прикрепите скриншоты ошибки, что бы я понимал где что смотреть.
      30 января 2018 13:46 Ответить
  23. +1

    Сергей

    Привет!
    Нашёл уязвимость в этом коде. Все проверки, которые стоят на входящий параметр игнорируют великую кавычку.
    $referal = trim(strip_tags(stripcslashes(htmlspecialchars($_POST["referal"]))));

    Срабатывает он так:
    Сперва trim обрезает пробелы, потом strip_tags убирает все теги .
    Но проблемы начинаются, когда ты начинаешь передавать '(одинарная кавычка). Она не экранизируется и если в запрос, в значение $referal передать ' OR '1'='1, то запрос из изначального:
    $db_referal = $mysqli -> query("SELECT * from ".PREFIX."search WHERE name LIKE '%$referal%'")

    станет модернизированным:
    $db_referal = $mysqli -> query("SELECT * from ".PREFIX."search WHERE name LIKE [b]' '  OR '1' = '1'[/b]")

    В конкретно взятом примере, это не страшно. Но оставлять возможность изменять SQL запросы - ужасная идея.
    Поэтому, добавить к обработчику пост запроса addslashes() было бы не лишним
    28 декабря 2017 06:12 Ответить
    1. 0

      Kylaksizov

      Пример был написан на быструю руку, пропустил. Но Вы правы, конечно нужно все это делать с умом, иначе найдутся умники поломать Ваш сайт.
      30 января 2018 13:48 Ответить
  24. 0

    Сергей

    Спасибо мужик!
    То что нужно, легко и удобно!
    25 декабря 2017 02:11 Ответить
  25. 0

    Станислав

    А чем решилась проблема у Игоря с ошибкой №17?
    18 декабря 2017 18:20 Ответить
    1. 0

      Kylaksizov

      Ошибка 17 говорит о том, что у вас не совпадают название полей в базе с теми, которые прописаны в файле.
      18 декабря 2017 19:20 Ответить
  26. 0

    Костя

    а как витянуть данние из двух таблиц?
    9 ноября 2017 23:11 Ответить
    1. 0

      Kylaksizov

      Google поиск: sql запрос объединение двух таблиц
      10 ноября 2017 09:21 Ответить
  27. 0

    Роман

    привет. у меня есть приложение codecanyon.net/item/noteplex-your-own-saas-notetaking-app/6031646?ref=ClientEng
    age&clickthrough_id=1039909569&redirect_back=true но там поиск плохой. можете сделать?
    super.video48@yandex.ru напишите мне
    27 июня 2017 10:04 Ответить
    1. 0

      Kylaksizov

      К сожалению у меня нет времени, сори...
      21 августа 2017 11:35 Ответить
  28. 0

    Nogardyvan

    Владимир, приветствую. Есть магазин на битриксе. Подскажите, пожалуйста, как в search.title, в выпадающем списке отключить отображение отсутствующих на складе товаров (товары с количеством 0). После нажатия кнопки поиск, товары в результате не отображаются, но в выпадающем списке они есть.
    5 мая 2017 08:57 Ответить
  29. 0

    Игорь

    Здравствуйте. Великолепный скрипт, то что нужно.
    Подскажите как вывести результат поиска на этой же странице.
    Есть 3 поля (Адрес) (ФИО) (Оборудование)
    Ищем по адресу, при клике на адрес надо тут же вывести инфу с остальных полей.
    _______
    ул. Зеленая
    Петров Петр Петрович
    Dlink-Dir300

    Заранее спасибо)
    26 апреля 2017 13:33 Ответить
    1. 0

      Kylaksizov

      Просто в search.php добавляете свои поля, например $row["name"] где name - это название поля из таблицы. То есть ставите $row["user_name"] например.
      21 августа 2017 10:59 Ответить
  30. 0

    misha8529

    Спасибо за ответ,значит буду ковырять методом проб и ошибок :)
    19 февраля 2017 15:34 Ответить

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

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

на сумму: 0

Всего: 0

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