• Страница 1 из 1
  • 1
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Выпадающий список результатов в форме поиска (Выпадающий список результатов в форме поиска)
Выпадающий список результатов в форме поиска
JEKA11
Сообщений: 7
Репутация: 2

Сообщение # 1 | 23:20:32
Здравствуйте

скажите пожалуйста, можно ли реализовать на ucoz такую вещь :
когда вбиваешь в форму поиска какое-то слово, то он внизу в блоке показывает совпадения по буквам с имеющимися файлами?
JonMagon
Сообщений: 2291
Репутация: 1828

Сообщение # 2 | 10:18:26

Не оказываю поддержку посредством ЛС/ICQ/Skype/AIM/XMPP/E-mail.
TkachenkoPavel
Сообщений: 1
Репутация: 0

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

В head

Код
<script type="text/javascript">
var siteURL = '$HOME_PAGE_LINK$';
</script>


Скрипт можно поместить в файл или поместить в тег <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;
}
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Выпадающий список результатов в форме поиска (Выпадающий список результатов в форме поиска)
  • Страница 1 из 1
  • 1
Поиск: