Выпадающий список результатов в форме поиска

Сообщение # 3 | 16:35:16 17 Мар 2017

Я реализовал это через javascript и jquery.
Не являюсь профессиональным разрабом, может что то делаю не так как надо не судите строго, главное он работает...
Если кто то его улучшит или переделает как надо, поделитесь исходниками, буду благодарен...

В head

Код

Скрипт можно поместить в файл или поместить в тег <script type="text/javascript"></script> и подключить перед </body>

Код

var inquiry;
var schlength;
// Количество материалов на странице поиска.
var maxschlength = 10;
$('.schQuery > input').attr('id','quick-search');
$('.search-box').append('<div id="search-result"></div>');

document.getElementById('quick-search').oninput=function(){ // работает только как javascript синтаксис
   inquiry = $('#quick-search').val();
   QuickSearch();
};
// Функция загрузки результатов поиска в DOM ну и еще пару приблуд
function QuickSearch() {
   $('#search-result').load(siteURL+'search #content td>a','q='+inquiry,function(){
      schlength = $('#search-result a').length;
      if(schlength >= 1){
         $('#search-result').append('<a id="all-result" href="'+siteURL+'search/?q='+inquiry+'"></a>')
         if (schlength == maxschlength){
            $('#all-result').text('все результаты / расширенный поиск')
         } else {$('#all-result').text('расширенный поиск')
         }
      }
   })
};

// Скрытие результатов поиска и очистка поля поиска по пракрутки
$(window).scroll(function() {
   inquiry = $('#quick-search').val('');
   $('#search-result > *').remove();
})

Немного по настройки скрипта.
Есть var maxschlength = 10, число 10 = количество материалов на странице поиска. В случае если вы поменяли в настройках сайта это число, поменяйте и в скрипте для корректной работы.

Простенький СSS делался для шаблона №1321

Код
.search-box {
    overflow: visible !important;
}
.searchForm {
    height: inherit !important;
}
#search-result {
    background: #fff;
    z-index: 10;
    position: absolute;
    border-top: 1px solid #eceff3;
    left: 0;
    width: 100%;
}
#search-result a {
    display: block;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 10px;
}
#all-result {
    background:#f27935;
    text-align: center;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
}
#all-result:hover {
   background:#3498db;
}
#all-result:hover {
   background:#3498db;
}

Страница 1 из 1 1
Модератор форума: JonMagon