Описание

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

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

  1. 0

    Алксандр

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

      Kylaksizov

      Если правильно настроить все, то конечно будет.
      27.03.2018 20:04 Ответить
  2. 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.02.2018 02:06 Ответить
    1. 0

      Kylaksizov

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

        Виталий

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

          Kylaksizov

          Я написал желательно. Если бы сравнивали например так ===
          15.02.2018 06:39 Ответить
  3. +1

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

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

      Kylaksizov

      Рад, что у Вас получилось!
      2.02.2018 09:59 Ответить
  4. 0

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

    Добрый день!

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

    на английском и с цифрами всё идеально но не с русским текстом
    30.01.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.01.2018 13:46 Ответить
  5. +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.12.2017 06:12 Ответить
    1. 0

      Kylaksizov

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

    Сергей

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

    Станислав

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

      Kylaksizov

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

    Костя

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

      Kylaksizov

      Google поиск: sql запрос объединение двух таблиц
      10.11.2017 09:21 Ответить
  9. 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.06.2017 10:04 Ответить
    1. 0

      Kylaksizov

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

    Nogardyvan

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

    Игорь

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

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

      Kylaksizov

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

    misha8529

    Спасибо за ответ,значит буду ковырять методом проб и ошибок :)
    19.02.2017 15:34 Ответить
  13. 0

    misha8529

    тоесть просто в настройках там это поменять нельзя?
    19.02.2017 15:26 Ответить
    1. 0

      Kylaksizov

      Без понятия. Я не ковырял его...
      19.02.2017 15:29 Ответить
  14. 0

    misha8529

    Дорого времени суток.А с шаблоном AdminLTE не поможешь.У тебя есть такой в магазине.Я яваскрипт вообще не знаю.Мне надо там одну настройку постоянной сделать в правом сайтбаре,что бы удалить удалить там все настройки.

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

    Можно там в настройках как то сделать чтобы он смещал контект даже после перезагрузки?
    19.02.2017 15:19 Ответить
    1. 0

      Kylaksizov

      Привет. Можно сделать с помощью localstorage.
      Если не можешь, то могу помочь только платно. Я бесплатно не работаю к сожалению и к счастью.
      19.02.2017 15:22 Ответить
  15. +1

    Михаил

    Спасибо огромное за скрипт,все отлично работает.Целый день потратил на поиск такого скрипта.Теперь часто буду посещать ваш сайт.
    18.02.2017 22:14 Ответить
    1. 0

      Kylaksizov

      Рад, что мой пример принес Вам помощь. Буду рад видеть Вас ещё...
      19.02.2017 09:26 Ответить
  16. 0

    Иван

    Добрый день! Скажите пожалуйста как прятать результаты при стирании символов в строке поиска? Когда пишу строку оно подгружает людей, но когда стираю оно подгружает всех(
    27.01.2017 11:24 Ответить
    1. 0

      Kylaksizov

      Нужно просто дописать условие в скрипте, что бы при минимальном количестве символов, в результате вбивалась пустота.
      27.01.2017 11:26 Ответить
      1. 0

        Иван

        Условие я так понимаю в скрипте php?
        27.01.2017 11:40 Ответить
        1. 0

          Kylaksizov

          Нет, в js
          27.01.2017 11:42 Ответить
          1. 0

            Иван

            К сожалению не силен в js ( Если есть возможно не могли бы вы мне подсказать это условие? И куда именно его вставить?
            Заранее благодарен!!!
            27.01.2017 11:48 Ответить
  17. 0

    Алексей

    Сорь за немного корявое размещение. Не сразу сообразил.
    26.12.2016 23:39 Ответить
  18. 0

    leshiy

    Уточните пожалуйста, как можно выбранную строку передать потом по POST через форму?

    Использую такой код:
    Но форма вообще, даже не нажимается.

    Внимание! У Вас нет прав для просмотра скрытого текста.
    1.12.2016 11:31 Ответить
    1. 0

      Kylaksizov

      Извините, но у меня нет времени сейчас помогать, задайте вопрос на нашем форуме forum.kylaksizov.ru возможно вам помогут.
      1.12.2016 11:34 Ответить
      1. 0

        Алексей

        Здравствуйте.
        Спасибо огромное все отлично работает.
        Возникла необходимость расширить возможности но поскольку не силен в java и ajax не могу въехать как реализовать.
        Подскажите пожалуйста как на вашем примере возможно реализовать живой поиск по двум полям в связке.
        К примеру есть поле Артикул и Имя товара, как сделать так чтобы при вводе информации в поле артикул или в поле имя товара открывалось сразу два списка в одном шли артикулы а в другом товары подвязанные к этим артикулам ну и при нажатии на нужный артикул или имя товара из списка информация вносилась в соответствующие поля.
        Заранее благодарен, надеюсь не слишком запутано написал.
        26.12.2016 12:52 Ответить
  19. 0

    Олег

    Failed to load resource: the server responded with a status of 508 (Loop Detected)

    Вот такая ошибка вылезает в консольке, да причем не одна, штук 10.
    Как с этим бороться?
    8.11.2016 13:17 Ответить
    1. 0

      Kylaksizov

      К сожалению, я не сталкивался с такой ошибкой. Не смогу решить этот вопрос.
      8.11.2016 13:36 Ответить
  20. 0

    Аня Бирюкова

    Добрый вечер, у меня пропадает сам инпут на сайте. ТО есть поле, где нужно вводить при загрузке страницы исчезает
    7.11.2016 02:53 Ответить
    1. 0

      Kylaksizov

      Проинспектируйте элемент, видимо стили какие-то блокируют - вот и вся причина.
      7.11.2016 07:57 Ответить

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

Кликните на изображение чтобы обновить код, если он неразборчив

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