Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Ютуб поиск на сайте + выпадающие подсказки

YouTube является сайт видео-обмена, на котором пользователи могут загружать, обмениваться и просматривать видео. У меня есть урок в котором шаг за шагом рассказано о том, как создать свой собственный поиск по YouTube.

Ютуб поиск на сайте + выпадающие подсказки


Демо: смотреть
Скачать: youtube_search.zip [44,97 Kb] (cкачиваний: 214)


Структура файлов и папок изображена ниже:
Ютуб поиск на сайте + выпадающие подсказки


jQTubeUtil
tubeutil.js является JQuery плагином. Утилита просто строит URL адресса роликов, предоставляя дружественный интерфейс для взаимодействия с поиском и результатами.

Что она может делать?
Поиск YouTube с помощью ключевых слов
Standard Search YouTube, каналы
выбор конкретного видео YouTube
получить автозаполнение предложения по YouTube поиску

Я собираюсь использовать этот плагин, потому что это очень быстро может интегрироваться в любой сайт.

Прежде чем начать, вы должны иметь YouTube API ключ для разработчиков. Просто зайдите на YouTube API , чтобы получить его - получить.

index.html
Начнем с разметки:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to create your own YouTube search engine</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/tubeutil.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>
  
<body>
      
    <form class="blocks" action="#" method="get">
        <p><input type="text" class="search" /></p>
        <p><input type="Submit" class="btn" value="Search" /></p>
        <ul class="reset autocomplete"></ul>
    </form>
      
    <ul class="reset movies"></ul>
  
</body>
</html>


init.js

Прежде всего вы должны инициализировать jQTubeUtil для того, чтобы обращаться к YouTube с запросами видео.

$(function(){
      
    jQTubeUtil.init({
        key: '', // your API key - required!
        orderby: 'viewCount', // optional, available values: relevance, published, viewCount, rating
        time: 'all_time', // optional,  available values: today, this_week, this_month, all_time
        maxResults: 9
    });
      
});


Следующий шаг заключается в создании функции, которая будет показывать результаты - назовем ее show_videos ()

function show_videos(){
    var val = $('.blocks').find('.search').val(); // get value from '.search' element
    $('.videos').addClass('preloader').html(''); // add preloader class and clear HTML in '.videos' element
    jQTubeUtil.search(val, function(response){ // init search method
        var html = '';
        for (v in response.videos) {
            var video = response.videos[v], // YouTube video object
                minutes = parseInt(video.duration / 60),
                seconds = video.duration % 60;
            // create 'li' element
            html += '<li>';
            html += '<p class="image"><a href="http://www.youtube.com/watch?v='+video.videoId+'">';
            html += '<img src="' + video.thumbs[1].url + '" alt="' + video.title + '" title="' + video.title + '" />';
            html += '</a></p>'
            html += '<p class="entry"><a href="http://www.youtube.com/watch?v='+video.videoId+'">' + video.title + '</a>';
            html += '<small>' + minutes + ':' + (seconds < 10 ? '0'+seconds : seconds) + '</small>';
            html += '</p>';
            html += '</li>';
        }
        $('.videos').removeClass('preloader').html(html); // remove preloder class and show videos
    });
}


Я рад, что вы все еще читаете;) Теперь мы собираемся создать автозаполнения предложения.

$('.search').keyup(function(){
    var val = $(this).val(); // get '.search' value when the user releases a key on the keyboard
    jQTubeUtil.suggest(val, function(response){
        var html = '';
        for(s in response.suggestions){
            var sug = response.suggestions[s];
            html += '<li><a href="#">'+sug+'</a></li>';
        }
        if (response.suggestions.length)
            $('.autocomplete').html(html).fadeIn(500); // show suggestions if exists
        else
            $('.autocomplete').fadeOut(500); // hide '.autocomplete' element
    });
});  


Последний шаг заключается в создании нажатия по выпадаюему предложению.

$('.btn').click(function(){
    show_videos();
    $('.autocomplete').fadeOut(500);
    return false;
});
  
$('.autocomplete').find('a').live('click', function(){
    // .live() method is able to affect elements that have not yet been added to the DOM  
    var text = $(this).text();
    $('.blocks').find('.search').val(text);
    $('.autocomplete').fadeOut(500);
    show_videos();
    return false;
});


Наконец init.js выглядит следующим образом:
$(function(){
      
    jQTubeUtil.init({
        key: '', // your API key - required!
        orderby: 'viewCount', // optional, available values: relevance, published, viewCount, rating
        time: 'all_time', // optional,  available values: today, this_week, this_month, all_time
        maxResults: 9
    });
      
    $('.search').keyup(function(){
        var val = $(this).val(); // get '.search' value when the user releases a key on the keyboard
        jQTubeUtil.suggest(val, function(response){
            var html = '';
            for(s in response.suggestions){
                var sug = response.suggestions[s];
                html += '<li><a href="#">'+sug+'</a></li>';
            }
            if (response.suggestions.length)
                $('.autocomplete').html(html).fadeIn(500); // show suggestions if exists
            else
                $('.autocomplete').fadeOut(500); // hide '.autocomplete' element
        });
    });  
      
    $('.btn').click(function(){
        show_videos();
        $('.autocomplete').fadeOut(500);
        return false;
    });
      
    $('.autocomplete').find('a').live('click', function(){
        // .live() method is able to affect elements that have not yet been added to the DOM  
        var text = $(this).text();
        $('.blocks').find('.search').val(text);
        $('.autocomplete').fadeOut(500);
        show_videos();
        return false;
    });
      
    function show_videos(){
        var val = $('.blocks').find('.search').val(); // get value from '.search' element
        $('.videos').addClass('preloader').html(''); // add preloader class and clear HTML in '.videos' element
        jQTubeUtil.search(val, function(response){ // init search method
            var html = '';
            for (v in response.videos) {
                var video = response.videos[v], // YouTube video object
                    minutes = parseInt(video.duration / 60),
                    seconds = video.duration % 60;
                // create 'li' element
                html += '<li>';
                html += '<p class="image"><a href="http://www.youtube.com/watch?v='+video.videoId+'">';
                html += '<img src="' + video.thumbs[1].url + '" alt="' + video.title + '" title="' + video.title + '" />';
                html += '</a></p>'
                html += '<p class="entry"><a href="http://www.youtube.com/watch?v='+video.videoId+'">' + video.title + '</a>';
                html += '<small>' + minutes + ':' + (seconds < 10 ? '0'+seconds : seconds) + '</small>';
                html += '</p>';
                html += '</li>';
            }
            $('.videos').removeClass('preloader').html(html); // remove preloder class and show videos
        });
    }
      
});


default.css
Добавим результатам приятный вид.
ul.reset,
ul.reset li {
    display:block;
    list-style:none;
    padding:0;
    margin:0;
}
  
.blocks {
    float:left;
    width:1000px;
    margin-bottom:50px;
    position:relative;
}
  
.blocks p {
    float:left;
    margin:0;
}
  
.blocks .search {
    float:left;
    width:258px;
    height:42px;
    line-height:42px;
    padding:0 10px;
    font-size:13px;
    color:#8c8c8c;
    background:url(../gfx/input.png) no-repeat;
    border:none;
}
  
.blocks .btn {
    float:left;
    width:71px;
    height:42px;
    border:none;
    text-indent:-9999px;
    cursor:pointer;
    background:url(../gfx/btn.png) no-repeat;
}
  
ul.autocomplete {
    display:none;
    width:300px;
    padding:10px;
    position:absolute;
    top:50px;
    left:0;
    background:#fff;
    border:1px solid #e4e4e4;
      
    /* CSS3 */
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
}
  
ul.autocomplete li a {
    display:block;
    padding:5px 10px;
    font-size:11px;
    outline:none;
}
  
ul.autocomplete li a:hover {
    background:#f5f5f5;
    color:#991b22;
      
    /* CSS3 */
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}
  
.videos {
    float:left;
    clear:both;
    width:100%;
    min-height:200px;
}
  
.videos.preloader {
    background:url(../gfx/loader.gif) no-repeat center;  
}
  
ul.videos li {
    float:left;
    width:300px;
    padding:10px;
    margin:0 5px 5px 0;
}
  
ul.videos li p {
    margin:0;
    padding:0;
}
  
.videos .image {
    float:left;
    width:120px;
    height:90px;
    font-size:0;
    line-height:0;
    padding:5px;
    background:#fff;
    border:1px solid #E6E6E6;
    overflow:hidden;
}
  
.videos .entry {
    float:right;
    width:163px;    
    font-weight:bold;
}
  
.videos .entry small {
    display:block;
    font-weight:normal;
    color:#ACACAC;
}


Наш поиск готов!
Опубликовал dimas_ua, 12-05-2011, 00:00 Комментариев: 1
 (голосов: 3)
Пишет Ассассин, 27 июня 2011 19:35
  • Сообщений: 0
  • Новостей: 0
Подскажите пожалуйста как сделать что бы можно было искать через GET переменную. например с другой страницы приходит переменная,но ничего не происходит из за того что нужно скриптом обработать запрос. как сделать что бы искал? заранее спасибо!