Verification: a143cc29221c9be0

Php ajax автозаполнение города живой поиск города

Php ajax автозаполнение города живой поиск города

Описание

ajax поиск

Недавно реализовал клиенту живой поиск на лендинге и решил поделиться скриптом.

Как работает живой поиск

При вводе в input слова, начинает искать в базе данных похожие выражения.

В скрипте я настроил так, что при вводе двух символов и более, начинается поиск и выдача результатов.

При клике на результат, он попадает в поле поиска, а сам результат скрывается и поле деактивируется.

Скрипт можно сделать под себя при необходимости. Ничего сложного.

index.html

В нём подключаем только библиотеку ajax и наш скрипт search.js

Стили:

И сам html:

    Файл 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();
    })
    })