Наша группа по 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. 0

    Игорь

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

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

      Kylaksizov

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

    misha8529

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

    misha8529

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

      Kylaksizov

      Без понятия. Я не ковырял его...
      19 февраля 2017 15:29 Ответить
  4. 0

    misha8529

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

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

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

      Kylaksizov

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

    Михаил

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

      Kylaksizov

      Рад, что мой пример принес Вам помощь. Буду рад видеть Вас ещё...
      19 февраля 2017 09:26 Ответить
  6. 0

    Иван

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

      Kylaksizov

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

        Иван

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

          Kylaksizov

          Нет, в js
          27 января 2017 11:42 Ответить
          1. 0

            Иван

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

    Алексей

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

    leshiy

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

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

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

      Kylaksizov

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

        Алексей

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

    Олег

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

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

      Kylaksizov

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

    Аня Бирюкова

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

      Kylaksizov

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

    Ринат

    Добрый день.
    Подскажите пожалуйста.
    Как отправлять post данные с формы?
    Использую следующий код.
    1 ноября 2016 22:01 Ответить
    1. 0

      Kylaksizov

      Если Вы про то, как отправить данные с помощью ajax, то вот куча примеров: https://api.jquery.com/jquery.post/
      Например:
      $.ajax({
        url: url,
        type: "POST",
        data: data,
        success: success,
        dataType: dataType
      });
      1 ноября 2016 22:07 Ответить
      1. 0

        Ринат

        Благодарю за оперативность.
        Прописал следующий код ниже формы, результат не передается.
        var $form = $( this ),
            term = $form.find( "input[name='referal']" ).val(),
            url = $form.attr( "action" );
        $.ajax({
          url: url,
          type: "POST",
          data: data,
          success: success,
          dataType: dataType
        });


        В чем может быть ошибка?
        1 ноября 2016 22:18 Ответить
        1. 0

          Kylaksizov

          У Вас очень много ошибок! Жмите мой скайп внизу сайта, если есть микрофон помогу сейчас. Только в темпе.
          1 ноября 2016 22:26 Ответить
  12. 0

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

    Добрый день Владимир! Спасибо за скрипт. Я его вставил в форму и он отлично работает в одном текстовом поле.
    Вы не знаете как вытягивать из базы другие поля и автоматически забивать их в другие текстовые поля формы.
    Например я выбрал из живого поиска название компании, а мне автоматически заполнились поля адрес и телефон взятые из базы
    Спасибо
    31 августа 2016 11:05 Ответить
    1. 0

      Kylaksizov

      Добрый день Николай.
      Это делается с помощью javascript или jquery.
      31 августа 2016 11:12 Ответить
  13. 0

    ARMAN

    у меня ошибка 17
    23 июля 2016 03:19 Ответить
    1. 0

      Kylaksizov

      По поводу ошибки №17 http://support.kylaksizov.ru/faq/
      9 августа 2016 15:54 Ответить
      1. 0

        Mike

        Добрый день, ошибка номер 19, подскажите что не так?
        10 августа 2016 10:45 Ответить
        1. 0

          Kylaksizov

          У вас нет поля name в таблице которой идёт выборка. То есть в место $row["name"] укажите своё наименование поля.
          10 августа 2016 10:49 Ответить
          1. 0

            Mike

            Спасибо за оперативный ответ, сверился с вашими исходника, причиной являлось удаление оператора LIKE в запросе :)
            10 августа 2016 10:59 Ответить
  14. 0

    Сергей

    Подскажите пожалуйста, поиск происходит только при вводе одного слова, когда начинаю водить второе слово, а именно когда нажимаю пробел) - результаты поиска пропадают. Как сделать по нескольким словам?
    25 июня 2016 15:11 Ответить
    1. 0

      Kylaksizov

      Потому что в search.php стоит функция trim, которая обрезает первый и последний пробел.
      То есть, если Вы введёте пробел и потом ещё хоть одну букву после пробела, то всё будет работать.
      25 июня 2016 15:14 Ответить
      1. 0

        Сергей

        А ещё хотел спросить, если необходимо делать выборку данных, которые находятся в нескольких таблицах (например в одной таблице марки автомобиля, в другой - модели, в третей таблице модификация), дописывать скрипт много надо? То есть хотелось бы чтобы человек вводил например "bmw x6" выдавались все BMW x6, если человек вводит ещё одно слово, например "bmw x6 2014" - выводились бы только BMW X6 2014 года выпуска. Дело в том ,что Марка, модель и год выпуска находятся в разных таблицах (car_mark, car_model и car_year) поэтому даже не знаю как сразу сделать поиск по нескольким таблицам.
        25 июня 2016 15:24 Ответить
  15. 0

    Виктор

    Добрый день, а как передать переменную из index в search?
    в index есть $IDGood
    в search хочу ее использовать чтоб подставлять в ссылку
    href="EditGoodsManufact.php?ID=<?= $IDGood?>"><?= $row['GOOD']?>
    19 июня 2016 19:52 Ответить
    1. 0

      Kylaksizov

      Добрый день.
      Подключайте тогда search в сам файл index.php, а вообще нужно смотреть по обстоятельствам. Я же не знаю как у Вас всё устроено.
      19 июня 2016 20:02 Ответить
      1. 0

        Виктор

        в а search.js
        ссылаться тогда на index.php?
        Попробую чуть позжу
        19 июня 2016 20:11 Ответить
  16. +1

    Dima

    Спасибо))) очень просто и качественно)))))
    6 июня 2016 11:25 Ответить
  17. 0

    dk111

    Добрый день. Все сделал как написано, но выдает 17 ошибку. Не совсем понятно, куда прописывать имя таблицы в search.php
    6 июня 2016 10:39 Ответить
    1. 0

      Kylaksizov

      Ответ смотрите тут: http://support.kylaksizov.ru/ticket.html?id=5
      6 июня 2016 10:59 Ответить
      1. 0

        Олег

        Привет!
        У меня вопрос к тебе есть! Если ты конечно еще отвечаешь)))
        Живой поиск настроил отлично и огромное тебе спасибо за него, но есть один нюанс.
        Поиск должен работать с гугловской апишкой карт и при нажатии на элемент выдачи должно центрировать карту этой записи
        Из базы данных тянем соответственно запись по запросу , например:
        | seattle |
        В выдаче получаем например несколько строк.
        В каждой строчке в выдаче есть информация о адресе,названии и т.п.
        Но в базе есть еще поля lattitude и longitude
        Как мне прикрутить в экшене
        $(".search_result").on("click", "li", function(){
        s_user = $(this).text();}

        данные из бд и прилинковать в такую конструкцию?

        var pos = {
        lat: [some data],
        lng: [some data]
        };
        map.setCenter(pos);
        });

        Если можешь, ответь мне на емейл?
        twitter_work_one@mail.ru
        1 ноября 2016 14:35 Ответить
  18. 0

    Игорь

    не подскажете почему не могу подключиться к бд ?
    Warning: mysqli::mysqli(): (28000/1045): Access denied for user 'vsetovary'@'localhost' (using password: YES) in /var/www/ecash789_1/data/www/vsetovary.net/search.php on line 9
    
    Warning: mysqli::query(): Couldn't fetch mysqli in /var/www/ecash789_1/data/www/vsetovary.net/search.php on line 10
    Ошибка соединения с базой!
    

    пароли/имена все правильно
    4 июня 2016 21:36 Ответить
    1. 0

      Kylaksizov

      Вывод один. Если бы Вы использовали чисто мой скрипт, то работало бы. Но вы по ходу подключаете или подключаетесь сторонние скрипты или CMS, поэтому ищите проблему сами, ничем помочь не смогу.
      Смотрите логи...
      4 июня 2016 21:45 Ответить
    2. 0

      Игорь

      добился подключения к базе путем создания нового пользователя )
      но, теперь ошибка номер 17 здесь http://vsetovary.net/
      что это значит ?
      завтра с утра свяжусь с Вами.
      4 июня 2016 23:18 Ответить
      1. 0

        Kylaksizov

        Ситуация та же что и у всех остальных. Смотрите правильно ли у Вас указаны имя поля или таблицы.
        5 июня 2016 16:57 Ответить
  19. 0

    Кирилл

    Отличный скрипт, спасибо Вам!) Единственный вопрос: как сделать так, чтобы в VALUE попадал id результата поиска?
    31 мая 2016 03:54 Ответить
    1. 0

      Kylaksizov

      Спасибо Кирилл. В value никак не может попасть id, так как скрипт выбирает несколько строк из таблицы, а не одну. То есть id будет много. Может я не правильно понял Вас.
      31 мая 2016 08:04 Ответить
  20. 0

    stas

    У меня выдает ошибку №17
    22 мая 2016 12:03 Ответить
    1. 0

      Kylaksizov

      Значит у Вас нет нужной таблицы или поля в базе данных.
      25 мая 2016 20:56 Ответить
    2. 0

      ernekyan

      та же проблема была
      з.ы. убрал определение префикса и написал имя таблицы ручками
      1 июня 2016 13:02 Ответить
      1. +1

        Kylaksizov

        $db_referal = $mysqli -> query("SELECT * from ".PREFIX."имя-таблицы WHERE поле LIKE '%$referal%'")
        1 июня 2016 13:20 Ответить
  21. 0

    Кирилл

    А можно сделать такой же поиск, но не по БД, а по массиву?
    16 мая 2016 08:15 Ответить
    1. 0

      Kylaksizov

      Добрый день Кирилл, конечно можно http://php.net/manual/ru/function.array-search.php
      16 мая 2016 08:46 Ответить
  22. 0

    LadyVamp

    Здравствуйте! Воспользовалась вашим кодом для поиска товаров в БД. Возникли проблемы
    1. Как сделать при клике на товар переход на страницу с его описанием?
    2. Почему-то кроме самого списка товаров в окошке дублируется вся страница (см. скриншот). Как это исправить?
    17 апреля 2016 23:07 Ответить
    1. 0

      Kylaksizov

      Добрый день. Всё просто.
      1. Вместо моей выборки:
      echo "\n<li>".$row["name"]."</li>"; //$row["name"] - имя поля таблицы

      напишите:
      echo "\n<li><a href='".$row["id"]."'>".$row["na
      me"]."</a></li>"; //$row["name"] - имя поля таблицы

      в href разумеется пишите путь к вашему товару, используя поля какие Вам нужны, например id товара $row["id"] или смотря как у Вас строится путь к товару.
      2. Скорей всего вы подключили php скрипт в файл шаблона, поэтому после вывода поискового результата скрипт продолжает выводить весь сайт. Если Вы код подключаете в самом начале всей обработки, после окончания выборки поставьте exit; что бы он перестал выполнять следующий код. А вообще он должен стоять в отдельном файле, тогда кроме результатов поиска выводить будет нечего.
      18 апреля 2016 05:36 Ответить
      1. 0

        LadyVamp

        У меня отдельный файл search.php, а к нему подключены header и footer. Если поставить exit; , то поиск вообще работать не будет, но сайт так и будет в окошке повторяться.
        ...
        21 апреля 2016 00:14 Ответить
        1. 0

          Kylaksizov

          Ещё раз повторюсь. Файл search.php должен лежать отдельно и в него ничего не нужно подключать.
          Напишите мне в скайп или позвоните. Мой скайп найдите внизу. ↓
          21 апреля 2016 07:18 Ответить
          1. 0

            LadyVamp

            Разобралась. Спасибо!
            23 апреля 2016 00:00 Ответить
  23. +1

    Максим

    респект!
    14 апреля 2016 14:56 Ответить
  24. 0

    Minich

    Сделал все и даже переделал все под PDO, но выдает ошибку при поиске:
    Код получился вот такой.
    Подскажите, пожалуйста, в чем может быть ошибка?
    Если в запросе ставить %referal% со знаком $ как переменную, то PHP ругается, что она не определена. Если убрать знак $, то скрипт работает и выдает ошибку, которую я описал выше. И при поиске выдает все записи, а не только те, что подходят под запрос.
    <?php
    define('PDO_DSN', 'mysql:host=localhost;dbname=test');
    define('PDO_USER', 'root');
    define('PDO_PASSW', '');
    define('PREFIX', 'questions');
    
    $DBH = new PDO(PDO_DSN, PDO_USER, PDO_PASSW, array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET names utf8'));
    
    if (!empty($_POST["referal"])) {
        $sql = $DBH->query("SELECT * FROM ".PREFIX." WHERE question LIKE '%$referal%'");
    
        while ($row = $sql->fetch(PDO::FETCH_LAZY)) {
            echo "\n<li>" . $row["question"] . "</li>";
            //$row[name];
        }
    }
    7 апреля 2016 22:26 Ответить
    1. 0

      Kylaksizov

      Вы же нигде не определяете эту переменную, сами сказали.
      Вот так нужно:
      $sql = $DBH->query("SELECT * FROM ".PREFIX." WHERE question LIKE '%".$_POST["referal"]."%'");

      ну или определить переменную выше:
      if (!empty($_POST["referal"])) {
          $referal = $_POST["referal"];
          $sql = $DBH->query("SELECT * FROM ".PREFIX." WHERE question LIKE '%$referal%'");
      8 апреля 2016 06:34 Ответить
      1. +1

        Minich

        Спасибо!!! Все получилось. Оказывается самое главное-то и забыл)))
        8 апреля 2016 09:34 Ответить
  25. 0

    Avksen

    Здравствуйте как реализовать поиск на сайте ?
    проблема в том, что база данных на другом сервере и нужно поиск реализовать через AJAX JSON PHP
    и вопрос как это сделать?
    5 апреля 2016 05:55 Ответить
    1. 0

      Kylaksizov

      Если есть доступ к файлам на другом сервере, то можно через GET запрос обычный, а можно через пост, но следует разрешить кроссдоменный запрос на другом сайте:
      header("Access-Control-Allow-Origin: *");
      5 апреля 2016 09:15 Ответить
  26. 0

    Елена

    А подскажите пожалуйста, как при вводе слова в поиск, не выбирая из списка, нажав enter - вывести результаты поиска. Ну то есть я набираю слово "конфеты' и не выбираю из списка, а нажимаю enter.
    18 марта 2016 20:26 Ответить
    1. 0

      Kylaksizov

      Если input будет обвёрнут тегом form, то он соответственно будет срабатывать (отсылать данные) по нажатию на Enter.
      18 марта 2016 20:34 Ответить
      1. 0

        Елена

        Да, я так и сделала, просто не понимаю как вывести результаты поиска в файле search.php , не создавая новый файл обработчик.
        18 марта 2016 21:17 Ответить
        1. 0

          Kylaksizov

          Елена, я удалил километр кода, который вы прикрепили, все равно ничего не понятно. Лучше напишите мне в скайп, завтра помогу. Контакты внизу.
          18 марта 2016 21:22 Ответить
          1. 0

            Елена

            Ну да, это я лишнее написала))
            Вообщем. если можете, покажите пример, как вывести по enter результаты поиска на отдельной странице.
            Спасибо. что уделяете время.
            18 марта 2016 21:33 Ответить
  27. +1

    Димон Царёв

    Всем советую. Скрипт работает!
    19 февраля 2016 20:36 Ответить
    1. 0

      Гость Мария

      Спасибо!!!
      21 ноября 2018 21:05 Ответить
  28. 0

    Наталия

    Владимир, добрый день!
    подскажите из-за чего могут получаться "пустые поля"?
    хотела добавить живой поиск на внутренний сайт, добавила, ищет, выдает правильное количество строк, совпадающих с поисковым запросом... но выдаются просто белые полосочки, которые при наведении подсвечиваются желтым.
    я подозреваю, что дело в кодировке. Но код написан в utf8 и база в utf8...
    абракадабра какая-то (
    17 февраля 2016 14:13 Ответить
    1. 0

      Kylaksizov

      Добрый день, Наталия, напишите адрес, где установлен поиск.
      17 февраля 2016 14:23 Ответить
      1. 0

        Наталия

        к сожалению, не могу ( Сайт на внутренней сетке, без выхода в инет
        17 февраля 2016 14:55 Ответить
        1. 0

          Kylaksizov

          Ну тогда скиньте проинспектированный элемент в раскрытом виде.
          17 февраля 2016 15:20 Ответить
    2. +1

      evgennova

      А если проверить настройки css?
      Вставить например для проверки
      <style>
      body li, li a{color:#000!important}
      </style>

      Код вставить на проверяемую страницу html...
      Тогда будет видно ищет или нет.

      Второй вариант - проверить в какой кодировке сохранен файл
      17 февраля 2016 18:58 Ответить
      1. 0

        Kylaksizov

        К стати, я тоже об этом думал, но в надежде, что Наталия это знает, я так и не написал. Видимо это будет правильное решение. Просто стили её блокируют стили поиска.
        17 февраля 2016 19:02 Ответить
        1. 0

          Наталия

          привет!
          спасибо за ответы! нет, стили не перекрываются - поиск тестирую на пустой странице.
          сделала скриншоты

          видно, что поиск ищет и находит "Ивановых Александров" - у меня их действительно три ... пока не написала Александр, полей в списке выводится больше. В инспекторе видно, что элементы списка живого поиска <li></li> пустые.
          Таблица в базе и сама база - в utf8, файл index.html - также в utf8 и search.php тоже. Куда еще можно посмотреть? )
          18 февраля 2016 10:28 Ответить
          1. 0

            Kylaksizov

            Привет, а ты заменила строку:
            echo "\n<li>".$row["name"]."</li>"; //$row["name"] - имя поля таблицы

            в файле search.php ?
            Нужно заменить поле name, что бы была выбрана информация из поля name из таблицы бд.
            Если не работает, напиши в личку свой скайп и я помогу.
            18 февраля 2016 11:03 Ответить
            1. +1

              Наталия

              ессессно, заменила )
              напишу из дома, на работе скайп невозможен )
              18 февраля 2016 12:41 Ответить
            2. +1

              Наталия

              Спасибо, Владимир, за оперативную профессиональную помощь!

              Владимир сделал 3 исправления и все заработало :)

              1)
              echo "\n<li>".$row["name"]."</li>"; //$row["name"]
              - имя поля таблицы
              я вместо имени поля указала имя таблицы.

              2) в файле search.php - установили кодировку UTF-8 вместо UTF-8 (без BOM)

              3) в корень тестового сайта добавили файл .htaccess, в котором указали кодировку по умолчанию
              AddDefaultCharset utf-8

              Все работает! Завтра повторю все эти манипуляции на работе, не сомневаюсь что и там теперь тоже все заработает.

              Еще раз спасибо :)
              18 февраля 2016 21:49 Ответить
  29. 0

    rikoff2009

    Владимир здравствуй! Попробовал установить живой поиск по твоему "рецепту", но что-то у меня не получается... С кодом я на Вы, попытался, поковырял, и ни как( Буду очень признателен за помощь. Сайт articlemen com
    12 февраля 2016 20:32 Ответить
    1. 0

      Kylaksizov

      Добрый день/вечер (Ваше имя) буду рад Вам помочь. Мой скайп: kylaksizov
      Или Напишите Ваш скайп.
      12 февраля 2016 21:04 Ответить
      1. 0

        rikoff2009

        Здравствуйте снова! Павел. Скайпа нет, у вас есть аська? Моя аська - 668863889
        12 февраля 2016 21:07 Ответить
        1. 0

          Kylaksizov

          У меня нет аськи, раньше была, там один спам вечно, установите себе скайп или я Вам не смогу помочь.
          12 февраля 2016 21:08 Ответить
          1. 0

            rikoff2009

            Я понял, сейчас займусь

            Зарегистрировался. Вроде ник - rikoff2009@yandex.ru
            Скайпом раннее не пользовался, поэтому если не получится соединиться, пожалуйста, отправьте свой ник по почте, а я отвечу
            12 февраля 2016 21:30 Ответить
            1. 0

              rikoff2009

              Огромное спасибо Владимиру за его труд! действительно человек требует восхищения. Очень хороший программист (код на сайте корявый, но очень быстро разобрался), работает быстро, подсказывает, отвечает на вопросы... Просто так автор тратит свое время чтобы помочь другим людям!
              Теперь буду на этот сайт заходить чуть ли не каждый день) очень редко, когда люди так помогают! Еще раз огромное спасибо!
              13 февраля 2016 11:18 Ответить
            2. 0

              Kylaksizov

              Спасибо большое за такие слова, был рад помочь.
              13 февраля 2016 12:40 Ответить
  30. +2

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

    Kylaksizov,
    Не, это повтор того, что в скрипте уже есть - закрытие по клику внутри области.
    Впрочем, я уже разобрался. Вот такая конструкция закрывает окошко с вариантами при выходе мыши за его границы
    $(document).mouseover(function (e){
    var div = $(".search_result");
    if (!div.is(e.target)
    && div.has(e.target).length === 0) {
    div.hide();
    }
    });
    Спасибо еще раз. Полезная статья и отличное сопровождение
    10 февраля 2016 12:56 Ответить
    1. 0

      Kylaksizov

      Можно и так, только я сразу исправил после публикации. Мой код немного короче и тоже рабочий.
      10 февраля 2016 12:58 Ответить
      1. 0

        evgennova

        Подскажите пожалуйста как можно добавить к коду переход по найденому с помощью клавиатуры
        10 февраля 2016 19:30 Ответить
        1. 0

          Kylaksizov

          Лучше воспользоваться плагином например jquery, чем писать самому.
          10 февраля 2016 19:34 Ответить
          1. 0

            evgennova

            ok, щас поищем, найду выложу......а что насчет вашего дополнения варианта скрипта, почему он так работает? (при наведении на выбранное исчезает все)
            11 февраля 2016 09:36 Ответить
            1. 0

              Kylaksizov

              В файле search.js стоит
              $(".search_result").fadeOut();

              Можно убрать его. Только он скрывается по клику, а не при наведении.
              11 февраля 2016 09:41 Ответить
    2. +1

      evgennova

      Ваш вариант работает корректнее чем
      $("body").on("mouseout", ".search_result", function(){
         $(this).fadeOut(300);
      })

      Невозможно что то выбрать из списка, сразу все поле исчезает
      10 февраля 2016 18:23 Ответить
    3. 0

      evgennova

      подскажите, как добавить затемнение фона (или opacity) к открывающимся результатам и при клике на фон (вне поля в результатами) - смена фона на нормальное состояние и закрытие результатов.
      Примерно как с модальными окнами
      $(this).append( '<div id="TB_overlay"></div>' );
      22 февраля 2016 12:31 Ответить
      1. 0

        Kylaksizov

        Добавьте в конец страницы
        <div class="bg_0"></div>
        .
        Создайте стиль для этого класса, например:
        .bg_0{
          background: rgba(0,0,0,0.7);
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 100; /*зависит от положения нужных вам элементов*/
          display: none;
        }

        Что-бы показать чёрный прозрачный фон, добавьте в нужное место скрипта jquery код:
        $(".bg_0").fadeIn("slow");

        Что-бы скрыть этот фон, прочтите пожалуйста статью http://jquery.page2page.ru/index.php5/%D0%A1%D0%BA%D1%80%D1%8B%D1%82%D1%8C
        _%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82_%D0%BF%D1%80%D0%B8_%D0%BA%D0%BB%D0%
        B8%D0%BA%D0%B5_%D0%B7%D0%B0_%D0%B5%D0%B3%D0%BE_%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D
        0%BB%D0%B0%D0%BC%D0%B8

        Переписывать её сюда нет желания.
        22 февраля 2016 12:39 Ответить
    4. 0

      evgennova

      есть код покороче....
      
      $('body').click(function(){
      $('.search_result').hide('slow');
      });
      

      к нему я еще добавил
      $('#search').click(function(event){
      $('.search_result').show();event.stopPropagation();
      });
      


      код взят с Пишем свой простой вариант "живого поиска". - только запустить у меня его не получилось... :-(
      22 февраля 2016 20:48 Ответить
      1. 0

        Kylaksizov

        Но это же не то, что Вы просили. Ваш код скрывает элемент, если кликнуть абсолютно по любому элементу.
        22 февраля 2016 20:51 Ответить
        1. 0

          evgennova

          это да, просто нашел лучший вариант, как на мой взгляд, упростить код
          Владимир Тальянский


          Вариант что вы посоветовали, не совсем то что мне нужно...
          этот вариант у меня сначала закрывает "затемнение" а при 2-м клике уже убирает подсказку. я хотел что бы было как в модульных окнах, при 1м нажатии на затемнение все исчезает. Немного погодя додумаю что то попроще, когда с мыслями соберусь :-)
          22 февраля 2016 21:02 Ответить
          1. 0

            evgennova

            затемнение при поиске:
            {$(".search_result").html(data).fadeIn().append( '<div id="ion_fon"></div>' );}


            #ion_fon{
              background: rgba(0,0,0,0.5); /*можно поменять на белый rgba(255, 255, 255, 0.5)*/
              position: fixed;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              z-index: -1; /*зависит от положения нужных вам элементов*/
            
            }
            22 февраля 2016 21:22 Ответить
            1. +1

              Kylaksizov

              Я предложит стандартные варианты, если Вам нужно что-то особенное, то думаю Вы справитесь и сами )
              22 февраля 2016 21:25 Ответить

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

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

на сумму: 0

Всего: 0

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