Описание

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

    Ринат

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

      Kylaksizov

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

        Ринат

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


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

          Kylaksizov

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

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

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

      Kylaksizov

      Добрый день Николай.
      Это делается с помощью jаvascript или jquery.
      31.08.2016 11:12 Ответить
  3. 0

    ARMAN

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

      Kylaksizov

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

        Mike

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

          Kylaksizov

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

            Mike

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

    Сергей

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

      Kylaksizov

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

        Сергей

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

    Виктор

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

      Kylaksizov

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

        Виктор

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

    Dima

    Спасибо))) очень просто и качественно)))))
    6.06.2016 11:25 Ответить
  7. 0

    dk111

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

      Kylaksizov

      Ответ смотрите тут: http://support.kylaksizov.ru/ticket.html?id=5
      6.06.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.11.2016 14:35 Ответить
  8. 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.06.2016 21:36 Ответить
    1. 0

      Kylaksizov

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

      Игорь

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

        Kylaksizov

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

    Кирилл

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

      Kylaksizov

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

    stas

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

      Kylaksizov

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

      ernekyan

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

        Kylaksizov

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

    Кирилл

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

      Kylaksizov

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

    LadyVamp

    Здравствуйте! Воспользовалась вашим кодом для поиска товаров в БД. Возникли проблемы
    1. Как сделать при клике на товар переход на страницу с его описанием?
    2. Почему-то кроме самого списка товаров в окошке дублируется вся страница (см. скриншот). Как это исправить?
    17.04.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.04.2016 05:36 Ответить
      1. 0

        LadyVamp

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

          Kylaksizov

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

            LadyVamp

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

    Максим

    респект!
    14.04.2016 14:56 Ответить
  14. 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.04.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.04.2016 06:34 Ответить
      1. +1

        Minich

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

    Avksen

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

      Kylaksizov

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

    Елена

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

      Kylaksizov

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

        Елена

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

          Kylaksizov

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

            Елена

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

    Димон Царёв

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

      Гость Мария

      Спасибо!!!
      21.11.2018 21:05 Ответить
  18. 0

    Наталия

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

      Kylaksizov

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

        Наталия

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

          Kylaksizov

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

      evgennova

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

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

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

        Kylaksizov

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

          Наталия

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

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

            Kylaksizov

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

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

              Наталия

              ессессно, заменила )
              напишу из дома, на работе скайп невозможен )
              18.02.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.02.2016 21:49 Ответить
  19. 0

    rikoff2009

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

      Kylaksizov

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

        rikoff2009

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

          Kylaksizov

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

            rikoff2009

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

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

              rikoff2009

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

              Kylaksizov

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

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

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

      Kylaksizov

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

        evgennova

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

          Kylaksizov

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

            evgennova

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

              Kylaksizov

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

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

      evgennova

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

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

      evgennova

      подскажите, как добавить затемнение фона (или opacity) к открывающимся результатам и при клике на фон (вне поля в результатами) - смена фона на нормальное состояние и закрытие результатов.
      Примерно как с модальными окнами
      $(this).append( '<div id="TB_overlay"></div>' );
      22.02.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.02.2016 12:39 Ответить
    4. 0

      evgennova

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

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


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

        Kylaksizov

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

          evgennova

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


          Вариант что вы посоветовали, не совсем то что мне нужно...
          этот вариант у меня сначала закрывает "затемнение" а при 2-м клике уже убирает подсказку. я хотел что бы было как в модульных окнах, при 1м нажатии на затемнение все исчезает. Немного погодя додумаю что то попроще, когда с мыслями соберусь :-)
          22.02.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.02.2016 21:22 Ответить
            1. +1

              Kylaksizov

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

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

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

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