Loading...

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

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", //Путь к обработчику
            data: {'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 [2 Kb] (cкачиваний: 2078)
Поблагодарить автора 


Вскоре структура сайта будет изменена.

Автор: Kylaksizov
Поделиться:

Комментарии ( 174 )


  1. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
    evgennova 6 октября 2015 20:20
    • +1
    Ответить
    Офигенный код от профи.
    Даже помог подпилить на мой корявый движок.
    Спасибо автору !
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 6 октября 2015 20:23
      • 0
      Ответить
      Спасибо, рад был помочь.
  2. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    Anon 19 ноября 2015 16:09
    • +1
    Ответить
    Подскажите пожалуйста, как лучше всего будет прикрутить loader к этому всему? Т.е, во время выполнения запроса к серверу и выборки, чтобы пользователю показывалась картинка загрузки данных
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 19 ноября 2015 16:14
      • 0
      Ответить
      Всё просто. Перед ajax запросом показываете уже готовую картинку loader.gif например. А после запроса, вернее когда возвращается дата, скрываем этот loader и всё.
  3. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    Денис 7 декабря 2015 02:08
    • +1
    Ответить
    Спасибо! Но есть вопросы.

    1) достаточно ли прав на чтение БД для работы данного поиска ?

    2) просто УМОЛЯЮ - помогите создать таблицу.
    Зашёл в панель MSQL - и в моей БД таблиц не обнаруженно. А как я понял нужна таблица...
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 7 декабря 2015 08:59
      • 0
      Ответить
      Добрый день Денис.
      1. это Вы сами уже назначаете права, по умолчанию должно быть всё настроено.
      2. Сделайте запрос в базу такой:
      CREATE TABLE `search`(`name` TEXT character set utf8 collate utf8_general_ci NOT NULL)

      Создание таблиц в БД
      1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
        Денис 7 декабря 2015 14:59
        • 0
        Ответить
        Спасибо, но выдает ошибку
        Warning: mysqli::mysqli(): php_network_getaddresses: getaddrinfo failed: hostname nor servname provided, or not known in/home/izba161/onitut.ru/docs/search.phpon line9
        1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
          Kylaksizov 7 декабря 2015 15:06
          • 0
          Ответить
          Если я не ошибаюсь, то это говорит о том, что скрипт не может соединиться с БД, т.е. неверный хост-сервер скорей всего.
          1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
            Денис 8 декабря 2015 05:26
            • 0
            Ответить
            define("DB_HOST","izba161.nichost.ru");
            define("DB_NAME","izba161_db"); //Имя базы
            define("DB_USER","izba161_mysql"); //Пользователь
            define("DB_PASSWORD","nSAieV5_"); //Пароль
            define("PREFIX",""); //Префикс если нужно

            вроде все правильно сделал....
            не работает.

            Автор - дело могарычевое - и дело принципа. помоги пожалуйста заставить. его работать.
            мой скайп ivashovdo - или как с тобой связаиься ?
            1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
              Kylaksizov 8 декабря 2015 07:39
              • 0
              Ответить
              Добавился, жду
  4. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    Денис 9 декабря 2015 08:00
    • +2
    Ответить
    Решено :)
    Дело было в моих "ровных" руках. Спасибо Владимиру Куласкизову за этот сайт.
    Второе - спасибо за своевременные коментарии в которых он отвечал на вопросы (пусть даже самые неадекватные)
    Третье - сам поиск по сайту (живой поиск) который написал Вова очень крут!
    Четвертое - оказалось мне этот поиск не подойдет, потому, что я использую чистый HTML+CSS+javascript (не использую CMS и базы данных, все делаю руками...)
    Пятое - спасибо Вове за то, что он НАСТОЯЛ на том, что бы я слез с тотал командера и начал использовать Файл зилу (Вова - действительно быстрее и удобнее спасибо)

    И в итоге, хорошо, что есть сайты на которых реально актуальная информация (в данном случае рабочий скрипт живого поиска для сайта). И очень хорошо, что вот так просто можно обычному человеку (далекому от программирования) задать вопрос, получить ответ, да еще и автор сайт перезвонит тебе в скайп и несмотря на свою загруженность просто по человекчески поможет все установить и расскажет.
    Вова - ты хороший программист и видимо отличный человек. Спасибо за твою работу и твой сайт!
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 9 декабря 2015 08:08
      • 0
      Ответить
      Денис, спасибо за такой отзыв :D
      Не перехвали ))) Я просто постоянно в сети, поэтому помочь 5 минут не составляет большого труда.
      Одно дело помочь и подсказать, другое сделать за кого-то работу.
      Спасибо ещё раз, красочно)
      1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
        Роман 13 декабря 2015 19:27
        • 0
        Ответить
        Приветствую, Владимир.

        Скрипт полезный! Все работает (подключаюсь к базе, идет живой поиск).
        Но при клике мышкой на варианте из появившегося списка (<li>) поле (input) не заполняется выбранным значением (((

        Как исправить? Подскажите, пожалуйста.
        1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
          Kylaksizov 13 декабря 2015 19:30
          • 0
          Ответить
          Спасибо Роман.
          В файле search.js нужно раскомментировать строку.
          //При выборе результата поиска, прячем список и заносим выбранный результат в input
           $(".search_result").on("click", "li", function(){
              s_user = $(this).text();
              $(".who").val(s_user).attr('disabled', 'disabled'); // эту строку, а если инпут ненужно деактивировать, то уберите это .attr('disabled', 'disabled')
              $(".search_result").fadeOut();
          })

          Отпишите, как результат.
          1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
            Роман 13 декабря 2015 19:53
            • +1
            Ответить
            Да, все ok !!!

            Огромное спасибо.
            1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
              Kylaksizov 13 декабря 2015 19:54
              • 0
              Ответить
              Вам спасибо, что уделили время моему сайту и моим скриптам :)
          2. avatar_/templates/Kylaksizov/dleimages/noavatar.png
            Максим 4 мая 2017 11:22
            • 0
            Ответить
            Здравствуйте! Все работает, раскоментировал строку и данные подставляются в поле, но их нельзя редактировать, как это исправить?

            Все нашел!!! Разобрался просто убрал .attr('disabled', 'disabled') и готово
  5. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    Ярослав 18 декабря 2015 15:32
    • 0
    Ответить
    Скрипт отличный!!! Но вот не подскажите ли, как сделать, что бы результат поиска выводился?
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 18 декабря 2015 15:34
      • 0
      Ответить
      Спасибо Ярик.
      Так поиск же итак выводит сразу результат.
      Детальней напишите пожалуйста...
      1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
        Ярослав 18 декабря 2015 17:43
        • +1
        Ответить
        Всё разобрался уже сам. Спасибо!
        1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
          Гость Александр 21 августа 2017 10:56
          • 0
          Ответить
          напишите решение
          1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
            Kylaksizov 21 августа 2017 11:49
            • 0
            Ответить
            Какое решение написать? Как выводить результат поиска? Так он по умолчанию итак выводится. Если у Вас не работает, значит Вы что-то не так подключили.
  6. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
    evgennova 18 декабря 2015 21:28
    • +1
    Ответить
    Пользуюсь этим скриптом уже довольно долго. Перед тем как выбрать самое лучшее решение "живого поиска" перелапатил много разных скриптов и с уверенностью могу сказать только одно - данный скрипт мал в объеме, прост и понятен (исходя из того что он делает). Как на мой взгляд необходимо было бы добавить парочку мелких доработок для улучшения восприятия людьми, такие как:

    1. вывод не только наименования, но и цены, артикулы, картинки (смотря для каких сайтов).

    2. добавить в код ограничение по выводу и сортировка по... (ORDER BY name LIMIT 15) кол-ва результатов, с дополнительным выводом фразы "просмотреть все" (то что не вошло в лимит поисковых результатов).

    3. при отсутствии найденных результатов выводить информацию ("поиск ничего не дал", "повторите ввод символов", ....и т.п.)

    4. добавить возможность исчезновения результатов поиска когда мышь не в фокусе или хотя бы по средствам кнопки "esc" (а то бывает что пользователь передумал что то искать, а результат висит как банный лист).

    5. добавить возможность перемещаться с помощью кнопок клавиатуры по найденным результатам (вверх, вниз).

    6. самое главное что бы можно было бы добавить, так это возможность при поиске выбирать части вводимых слов, а именно по разным (не по порядку) выбором слов в наименовании, например - ("Электрочайник Delonghi KBZ 2001.GY Scultura Collection") можно было бы его найти по написании фразы в поиске "Delonghi Scultura" - что то вроде автодополнения, т.е. после нажатия на пробел появляется возможность поиска уточнений в уже найденных товарах...

    P.S. парочку таких скриптов нашел, но при подключении работали каждый по своему некорректно....
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 25 декабря 2015 10:31
      • +1
      Ответить
      Советы дельные, но я как раз специально написал проще простого, что бы как можно меньше возникало вопросов у тех, кто никогда не делал этого.
      Можно сделать сколько угодно проверок, лимит и т.д., но это уже каждому индивидуально.
      1. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
        evgennova 25 декабря 2015 18:29
        • 0
        Ответить
        цена вопроса улучшения по пункту №6?

        P.S. пункты 3,4,5 - не особо проблемные (есть даже другой код со всем выше перечисленным кроме 6 пункта)
        С 6 пунктом искал готовый код но ничего целостного не нашел, очень много нужно подпиливать и подставлять - пока не силен в этом, и забросил до лучших времен :-) ... )
        1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
          Kylaksizov 25 декабря 2015 18:38
          • 0
          Ответить
          В принципе ничего сложного тут нет, просто обработка будет чуть дольше. Но для человеческого глаза это не заметно.
          Цену на сайте я не обсуждаю. Скайп у Вас мой есть по моему.
      2. avatar_/templates/Kylaksizov/dleimages/noavatar.png
        Nicolas 24 августа 2016 17:35
        • 0
        Ответить
        Правильно сделали, не должно быть ничего лишнего, вы создали базу, а все остальное - индивидуальные потребности каждого.
  7. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    Дмитрий 25 декабря 2015 10:22
    • +1
    Ответить
    Наконец-то работающий код! СПАСИБО!!! :)
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 25 декабря 2015 10:29
      • 0
      Ответить
      Пожалуйста
  8. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    Игорь 19 января 2016 12:18
    • 0
    Ответить
    добрый день,
    помогите плиз разобраться с ошибкой №17
    сайт klepa-i-misha com
    сделал по инструкции все.
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 19 января 2016 15:49
      • 0
      Ответить
      Помог...
    2. avatar_/templates/Kylaksizov/dleimages/noavatar.png
      Роман 28 января 2016 20:05
      • 0
      Ответить
      Сделай для .search_result {position: absolute; z-index:9999;} Так будет лучше
      1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
        Kylaksizov 28 января 2016 20:17
        • 0
        Ответить
        Я делал на пустой странице. А тем кто ставит на сайт, тем будет лучше, ты прав. Тут править не буду, я написал как можно меньше кода, что бы было более понятно.
  9. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    saintroma 29 января 2016 02:18
    • 0
    Ответить
    Какие права давать пользователю к БД?
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 29 января 2016 08:27
      • 0
      Ответить
      На чтение точно. Не знаю, я всегда ставлю по умолчанию.
  10. avatar_https://kylaksizov.ru/uploads/fotos/foto_300.jpg
    Владимир Тальянский 10 февраля 2016 09:50
    • +1
    Ответить
    Отличная штука, спасибо!
    Изменил по-мелочи по своему вкусу - добавил в выводе вариантов цену, окно сделал поверх через z-index, но напрягает одна штука, которую победить так и не смог. Если посетитель начал вводить что-то в поле запроса, окно вариантов появилось, но тут человек передумал искать, а окно так просто не закрывается. Подскажите пожалуйста, что дописать в js, чтобы при выходе курсора мыши за границы окошка оно закрывалось (или при клике в области вне окошка - даже не знаю как лучше).
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 10 февраля 2016 09:55
      • 0
      Ответить
      Спасибо за Ваш комментарий.
      По клику вне элемента, посмотрите пожалуйста эту стать "клик вне элемента" тут хорошо всё описано, если уже не разберётесь сами, то помогу, не вопрос.
      И тут можете посмотреть помощь по jquery.
      1. avatar_https://kylaksizov.ru/uploads/fotos/foto_300.jpg
        Владимир Тальянский 10 февраля 2016 12:22
        • 0
        Ответить
        Спасибо! С кликом вне элемента получилось сделать. А вот со схлопыванием по перемещению курсора за границы окна так и не одолел....
        1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
          Kylaksizov 10 февраля 2016 12:25
          • 0
          Ответить
          Если я правильно понял вопрос, то нужно добавить метод mouseout.
          Если не то, то подробнее напишите задачу.
          1. avatar_https://kylaksizov.ru/uploads/fotos/foto_300.jpg
            Владимир Тальянский 10 февраля 2016 12:38
            • 0
            Ответить
            Хотелось бы, чтобы окошко с вариантами закрывалось при выходе курсора за его границы. Человек набрал несколько букв, появилось окошко с вариантами, он смещается вниз, ходит по вариантам, но если курсор мыши уходит за границы, то окошко схлопывается.
            Я попробовал тупо вместо mouseup поставить mouseout - работает, но не так, как хотелось - набираю несколько букв в поле поиска - появляется окно с вариантами, но при попытке переходе на него вниз оно исчезает(((
            1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
              Kylaksizov 10 февраля 2016 12:41
              • 0
              Ответить
              $("body").on("mouseout", ".search_result", function(){
                 $(this).fadeOut(300);
              })

              Ой, изменил, сейчас правильно)))
  11. avatar_https://kylaksizov.ru/uploads/fotos/foto_300.jpg
    Владимир Тальянский 10 февраля 2016 12:56
    • +2
    Ответить
    Kylaksizov,
    Не, это повтор того, что в скрипте уже есть - закрытие по клику внутри области.
    Впрочем, я уже разобрался. Вот такая конструкция закрывает окошко с вариантами при выходе мыши за его границы
    $(document).mouseover(function (e){
    var div = $(".search_result");
    if (!div.is(e.target)
    && div.has(e.target).length === 0) {
    div.hide();
    }
    });
    Спасибо еще раз. Полезная статья и отличное сопровождение
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 10 февраля 2016 12:58
      • 0
      Ответить
      Можно и так, только я сразу исправил после публикации. Мой код немного короче и тоже рабочий.
      1. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
        evgennova 10 февраля 2016 19:30
        • 0
        Ответить
        Подскажите пожалуйста как можно добавить к коду переход по найденому с помощью клавиатуры
        1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
          Kylaksizov 10 февраля 2016 19:34
          • 0
          Ответить
          Лучше воспользоваться плагином например jquery, чем писать самому.
          1. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
            evgennova 11 февраля 2016 09:36
            • 0
            Ответить
            ok, щас поищем, найду выложу......а что насчет вашего дополнения варианта скрипта, почему он так работает? (при наведении на выбранное исчезает все)
            1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
              Kylaksizov 11 февраля 2016 09:41
              • 0
              Ответить
              В файле search.js стоит
              $(".search_result").fadeOut();

              Можно убрать его. Только он скрывается по клику, а не при наведении.
    2. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
      evgennova 10 февраля 2016 18:23
      • +1
      Ответить
      Ваш вариант работает корректнее чем
      $("body").on("mouseout", ".search_result", function(){
         $(this).fadeOut(300);
      })

      Невозможно что то выбрать из списка, сразу все поле исчезает
    3. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
      evgennova 22 февраля 2016 12:31
      • 0
      Ответить
      подскажите, как добавить затемнение фона (или opacity) к открывающимся результатам и при клике на фон (вне поля в результатами) - смена фона на нормальное состояние и закрытие результатов.
      Примерно как с модальными окнами
      $(this).append( '<div id="TB_overlay"></div>' );
      1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
        Kylaksizov 22 февраля 2016 12:39
        • 0
        Ответить
        Добавьте в конец страницы
        <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

        Переписывать её сюда нет желания.
    4. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
      evgennova 22 февраля 2016 20:48
      • 0
      Ответить
      есть код покороче....
      
      $('body').click(function(){
      $('.search_result').hide('slow');
      });
      

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


      код взят с Пишем свой простой вариант "живого поиска". - только запустить у меня его не получилось... :-(
      1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
        Kylaksizov 22 февраля 2016 20:51
        • 0
        Ответить
        Но это же не то, что Вы просили. Ваш код скрывает элемент, если кликнуть абсолютно по любому элементу.
        1. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
          evgennova 22 февраля 2016 21:02
          • 0
          Ответить
          это да, просто нашел лучший вариант, как на мой взгляд, упростить код
          Владимир Тальянский


          Вариант что вы посоветовали, не совсем то что мне нужно...
          этот вариант у меня сначала закрывает "затемнение" а при 2-м клике уже убирает подсказку. я хотел что бы было как в модульных окнах, при 1м нажатии на затемнение все исчезает. Немного погодя додумаю что то попроще, когда с мыслями соберусь :-)
          1. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
            evgennova 22 февраля 2016 21:22
            • 0
            Ответить
            затемнение при поиске:
            {$(".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; /*зависит от положения нужных вам элементов*/
            
            }
            1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
              Kylaksizov 22 февраля 2016 21:25
              • +1
              Ответить
              Я предложит стандартные варианты, если Вам нужно что-то особенное, то думаю Вы справитесь и сами )
  12. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    rikoff2009 12 февраля 2016 20:32
    • 0
    Ответить
    Владимир здравствуй! Попробовал установить живой поиск по твоему "рецепту", но что-то у меня не получается... С кодом я на Вы, попытался, поковырял, и ни как( Буду очень признателен за помощь. Сайт articlemen com
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 12 февраля 2016 21:04
      • 0
      Ответить
      Добрый день/вечер (Ваше имя) буду рад Вам помочь. Мой скайп: kylaksizov
      Или Напишите Ваш скайп.
      1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
        rikoff2009 12 февраля 2016 21:07
        • 0
        Ответить
        Здравствуйте снова! Павел. Скайпа нет, у вас есть аська? Моя аська - 668863889
        1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
          Kylaksizov 12 февраля 2016 21:08
          • 0
          Ответить
          У меня нет аськи, раньше была, там один спам вечно, установите себе скайп или я Вам не смогу помочь.
          1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
            rikoff2009 12 февраля 2016 21:30
            • 0
            Ответить
            Я понял, сейчас займусь

            Зарегистрировался. Вроде ник - rikoff2009@yandex.ru
            Скайпом раннее не пользовался, поэтому если не получится соединиться, пожалуйста, отправьте свой ник по почте, а я отвечу
            1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
              rikoff2009 13 февраля 2016 11:18
              • 0
              Ответить
              Огромное спасибо Владимиру за его труд! действительно человек требует восхищения. Очень хороший программист (код на сайте корявый, но очень быстро разобрался), работает быстро, подсказывает, отвечает на вопросы... Просто так автор тратит свое время чтобы помочь другим людям!
              Теперь буду на этот сайт заходить чуть ли не каждый день) очень редко, когда люди так помогают! Еще раз огромное спасибо!
            2. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
              Kylaksizov 13 февраля 2016 12:40
              • 0
              Ответить
              Спасибо большое за такие слова, был рад помочь.
  13. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    Наталия 17 февраля 2016 14:13
    • 0
    Ответить
    Владимир, добрый день!
    подскажите из-за чего могут получаться "пустые поля"?
    хотела добавить живой поиск на внутренний сайт, добавила, ищет, выдает правильное количество строк, совпадающих с поисковым запросом... но выдаются просто белые полосочки, которые при наведении подсвечиваются желтым.
    я подозреваю, что дело в кодировке. Но код написан в utf8 и база в utf8...
    абракадабра какая-то (
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 17 февраля 2016 14:23
      • 0
      Ответить
      Добрый день, Наталия, напишите адрес, где установлен поиск.
      1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
        Наталия 17 февраля 2016 14:55
        • 0
        Ответить
        к сожалению, не могу ( Сайт на внутренней сетке, без выхода в инет
        1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
          Kylaksizov 17 февраля 2016 15:20
          • 0
          Ответить
          Ну тогда скиньте проинспектированный элемент в раскрытом виде.
    2. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
      evgennova 17 февраля 2016 18:58
      • +1
      Ответить
      А если проверить настройки css?
      Вставить например для проверки
      <style>
      body li, li a{color:#000!important}
      </style>

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

      Второй вариант - проверить в какой кодировке сохранен файл
      1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
        Kylaksizov 17 февраля 2016 19:02
        • 0
        Ответить
        К стати, я тоже об этом думал, но в надежде, что Наталия это знает, я так и не написал. Видимо это будет правильное решение. Просто стили её блокируют стили поиска.
        1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
          Наталия 18 февраля 2016 10:28
          • 0
          Ответить
          привет!
          спасибо за ответы! нет, стили не перекрываются - поиск тестирую на пустой странице.
          сделала скриншоты

          видно, что поиск ищет и находит "Ивановых Александров" - у меня их действительно три ... пока не написала Александр, полей в списке выводится больше. В инспекторе видно, что элементы списка живого поиска <li></li> пустые.
          Таблица в базе и сама база - в utf8, файл index.html - также в utf8 и search.php тоже. Куда еще можно посмотреть? )
          1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
            Kylaksizov 18 февраля 2016 11:03
            • 0
            Ответить
            Привет, а ты заменила строку:
            echo "\n<li>".$row["name"]."</li>"; //$row["name"] - имя поля таблицы

            в файле search.php ?
            Нужно заменить поле name, что бы была выбрана информация из поля name из таблицы бд.
            Если не работает, напиши в личку свой скайп и я помогу.
            1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
              Наталия 18 февраля 2016 12:41
              • +1
              Ответить
              ессессно, заменила )
              напишу из дома, на работе скайп невозможен )
            2. avatar_/templates/Kylaksizov/dleimages/noavatar.png
              Наталия 18 февраля 2016 21:49
              • +1
              Ответить
              Спасибо, Владимир, за оперативную профессиональную помощь!

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

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

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

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

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

              Еще раз спасибо :)
  14. avatar_https://kylaksizov.ru/uploads/fotos/foto_313.jpg
    Димон Царёв 19 февраля 2016 20:36
    • +1
    Ответить
    Всем советую. Скрипт работает!
  15. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    Елена 18 марта 2016 20:26
    • 0
    Ответить
    А подскажите пожалуйста, как при вводе слова в поиск, не выбирая из списка, нажав enter - вывести результаты поиска. Ну то есть я набираю слово "конфеты' и не выбираю из списка, а нажимаю enter.
    1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 18 марта 2016 20:34
      • 0
      Ответить
      Если input будет обвёрнут тегом form, то он соответственно будет срабатывать (отсылать данные) по нажатию на Enter.
      1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
        Елена 18 марта 2016 21:17
        • 0
        Ответить
        Да, я так и сделала, просто не понимаю как вывести результаты поиска в файле search.php , не создавая новый файл обработчик.
        1. avatar_//kylaksizov.ru/uploads/fotos/foto_1.jpg
          Kylaksizov 18 марта 2016 21:22
          • 0
          Ответить
          Елена, я удалил километр кода, который вы прикрепили, все равно ничего не понятно. Лучше напишите мне в скайп, завтра помогу. Контакты внизу.
          1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
            Елена 18 марта 2016 21:33
            • 0
            Ответить
            Ну да, это я лишнее написала))
            Вообщем. если можете, покажите пример, как вывести по enter результаты поиска на отдельной странице.
            Спасибо. что уделяете время.
    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent


В корзине: 0 шт. 0 руб.
Отключите расширение AdBlock на нашем сайте!
    Нименование Количество Цена / 1 шт.
    Всего: 0 руб.