Описание

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 Загрузок: 4730 [2 Kb]
Поблагодарить автора 
Жалоба

Комментарии 204

  1. 0

    Гость

    Здравствуйте. При выборе нужного результата поиска, запись не сажается в поле input. Как быть ?
    6.10.2020 16:00 Ответить
    1. 0

      Kylaksizov

      В коде есть эта функция, значит возникает конфликт, если Вы ставите это все на шаблон какой-то или сайт. Смотрите консоль.
      6.10.2020 16:02 Ответить
    2. 0

      Джонни

      Попробуйте вместо класса who сделать id
      22.08.2021 19:54 Ответить
  2. +2

    Константин

    Скрипт то, что надо. Спасибо!
    2.05.2020 22:03 Ответить
  3. -1

    mnpartner

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

    10.01.2020 13:52 Ответить
  4. +1

    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.08.2019 01:31 Ответить
    1. 0

      David

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

    Гость Андрей

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

      Kylaksizov

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

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

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

    Alex

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

      Kylaksizov

      Нужно переписывать скрипт.
      24.05.2019 13:16 Ответить
  8. 0

    Veronica

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

      Kylaksizov

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

        Veronica

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

          Veronica

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

            Veronica

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

    Денис

    Здравствуйте ,касательно postgressql...подключение осуществляются в начальном index.php ,касательно обычного поиска без скрипта "живого" все работает , но что касается скрипта , так сразу как только набираешь второй символ и далее начинает выдавать ошибку в консоли 
    POST https://адрес сайти/адрес перехода/файл в котором все 403 (Forbidden), для теста все расположил сначала в одном файле убрал url из скрипта( с ним тоже не работает, если на этот же файл). Так как поиск по базе осуществляется (при нажатии интер), как я понял к базе подключение имеетсяю.
    27.02.2019 13:45 Ответить
  10. 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.02.2019 01:43 Ответить
  11. 0

    Григорий

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

    SeaDeviLL

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

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

      Kylaksizov

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

    lion

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

      Kylaksizov

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

    Елена

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

    Роман

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

      Kylaksizov

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

    slon

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

    Вячеслав

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

      Artyom

      Да можно через keyup можно без кнопки или через blur
      29.08.2018 00:34 Ответить
  18. 0

    12

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

      Kylaksizov

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

    bass_pro

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

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

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

      Kylaksizov

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

        Bass_pro

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

          Kylaksizov

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

    Дамир

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

      Kylaksizov

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

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

    • Смайлы и люди
      Животные и природа
      Еда и напитки
      Активность
      Путешествия и места
      Предметы
      Символы
      Флаги

Похожие товары