结合 youtube 自动完成搜索框的 js 和 html 代码。答案

【问题标题】：combine the js and html code for youtube autocomplete search box.结合 youtube 自动完成搜索框的 js 和 html 代码。
【发布时间】：2014-05-23 04:18:30
【问题描述】：

我有一个 youtube 自动完成的代码，但我不知道如何组合这个代码，请让这个代码工作。此 serch 应显示 youtube 自动完成查询。是否可以结合此代码

js 代码

$("#youtube").autocomplete({
source: function(request, response){
    /* Google Developer ID (optional) */
    var apiKey = 'AI39si7ZLU83bKtKd4MrdzqcjTVI3DK9FvwJR6a4kB_SW_Dbuskit-mEYqskkSsFLxN5DiG1OBzdHzYfW0zXWjxirQKyxJfdkg';
    /* Search keyword */
    var query = request.term;
    /* youtube sorgusu */
    $.ajax({
        url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q="+query+"&key="+apiKey+"&format=5&alt=json&callback=?",  
        dataType: 'jsonp',
        success: function(data, textStatus, request) { 
           response( $.map( data[1], function(item) {
                return {
                    label: item[0],
                    value: item[0]
                }
            }));
        }
    });
},
/* You can use transaction is selected here to */
select: function( event, ui ) {
    $.youtubeAPI(ui.item.label);
}
});

搜索按钮上的压力

$('button#submit').click(function(){
var value = $('input#youtube').val();
    $.youtubeAPI(value);
});

Youtube 搜索功能

$.youtubeAPI = function(kelime){
var sonuc = $('#sonuc');
sonuc.html('Arama gerçeklestiriliyor...');
$.ajax({
    type: 'GET',
    url: 'http://gdata.youtube.com/feeds/api/videos?q=' + kelime + '&max-results=15&v=2&alt=jsonc',
    dataType: 'jsonp',
    success: function( veri ){
        if( veri.data.items ){
            sonuc.empty();
            $.each( veri.data.items, function(i, data) {
                sonuc.append('<div class="youtube">\
                    <img src="' + data.thumbnail.sqDefault + '" alt="" />\
                    <h3><a href="javascript:void(0)" onclick="$.youtubePlay(\'' + data.id + '\', \'' + data.content[5] + '\')">' + data.title + '</a></h3>\
                    <p>' + data.description + '</p>\
                </div>\
                <div class="youtubeOynat" id="' + data.id + '"></div>');
            });
        }
        else {
            sonuc.html('<div class="hata"><strong>' + kelime + '</strong> ile ilgili hiç video bulunamadi!</div>');
        }
    }
});
}

YouTube 视频播放功能

$.youtubePlay = function(yid, frame){
$('.youtubeOynat').slideUp().empty();
$('#'+yid).slideDown().html('<iframe src="'+ frame +'&autoplay=1" style="width: 100%; box-sizing: border-box; height: 300px" />');
}

html代码

<div class="arama">
<form action="" onsubmit="return false">
    <h2>Youtube API jQuery AutoComplete</h2>
    <div class="ui-widget">
        <label for="youtube">Youtube SEARCH: </label>
        <input id="youtube" />
        <button id="submit">SEARCH</button>
    </div>
</form>
</div>

【问题讨论】：

标签： javascript jquery html css youtube

【解决方案1】：

您的代码运行良好。我刚刚测试了它。复制下面的代码试试看。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#youtube").autocomplete({
    source: function(request, response){
        /* Google Developer ID (optional) */
        var apiKey = 'AI39si7ZLU83bKtKd4MrdzqcjTVI3DK9FvwJR6a4kB_SW_Dbuskit-mEYqskkSsFLxN5DiG1OBzdHzYfW0zXWjxirQKyxJfdkg';
        /* Search keyword */
        var query = request.term;
        /* youtube sorgusu */
        $.ajax({
            url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q="+query+"&key="+apiKey+"&format=5&alt=json&callback=?",  
            dataType: 'jsonp',
            success: function(data, textStatus, request) { 
               response( $.map( data[1], function(item) {
                    return {
                        label: item[0],
                        value: item[0]
                    }
                }));
            }
        });
    },
    /* You can use transaction is selected here to */
    select: function( event, ui ) {
        $.youtubeAPI(ui.item.label);
    }
    });

            $('button#submit').click(function(){
    var value = $('input#youtube').val();
        $.youtubeAPI(value);
    });


            $.youtubeAPI = function(kelime){
    var sonuc = $('#sonuc');
    sonuc.html('Arama gerçeklestiriliyor...');
    $.ajax({
        type: 'GET',
        url: 'http://gdata.youtube.com/feeds/api/videos?q=' + kelime + '&max-results=15&v=2&alt=jsonc',
        dataType: 'jsonp',
        success: function( veri ){
            if( veri.data.items ){
                sonuc.empty();
                $.each( veri.data.items, function(i, data) {
                    sonuc.append('<div class="youtube">\
                        <img src="' + data.thumbnail.sqDefault + '" alt="" />\
                        <h3><a href="javascript:void(0)" onclick="$.youtubePlay(\'' + data.id + '\', \'' + data.content[5] + '\')">' + data.title + '</a></h3>\
                        <p>' + data.description + '</p>\
                    </div>\
                    <div class="youtubeOynat" id="' + data.id + '"></div>');
                });
            }
            else {
                sonuc.html('<div class="hata"><strong>' + kelime + '</strong> ile ilgili hiç video bulunamadi!</div>');
            }
        }
    });
    }
            $.youtubePlay = function(yid, frame){
    $('.youtubeOynat').slideUp().empty();
    $('#'+yid).slideDown().html('<iframe src="'+ frame +'&autoplay=1" style="width: 100%; box-sizing: border-box; height: 300px" />');
    }
        });
    </script>

    <div class="arama">
    <form action="" onsubmit="return false">
        <h2>Youtube API jQuery AutoComplete</h2>
        <div class="ui-widget">
            <label for="youtube">Youtube SEARCH: </label>
            <input id="youtube" />
            <button id="submit">SEARCH</button>
        </div>
    </form>
    </div>

【讨论】：

【解决方案2】：

neerajdngl 的代码非常好。我更新了它以使搜索图标正常工作。以下代码现在通过 Youtube API 自动完成并且功能齐全。如果您在 example.com/search.html 并搜索猫，它将带您到 example.com/cats

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#youtube").autocomplete({
    source: function(request, response){
        /* Google Developer ID (optional) */
        var apiKey = 'AI39si7ZLU83bKtKd4MrdzqcjTVI3DK9FvwJR6a4kB_SW_Dbuskit-mEYqskkSsFLxN5DiG1OBzdHzYfW0zXWjxirQKyxJfdkg';
        /* Search keyword */
        var query = request.term;
        /* youtube sorgusu */
        $.ajax({
            url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q="+query+"&key="+apiKey+"&format=5&alt=json&callback=?",  
            dataType: 'jsonp',
            success: function(data, textStatus, request) { 
               response( $.map( data[1], function(item) {
                    return {
                        label: item[0],
                        value: item[0]
                    }
                }));
            }
        });
    },
    /* You can use transaction is selected here to */
    select: function( event, ui ) {
        $.youtubeAPI(ui.item.label);
    }
    });

            $('button#submit').click(function(){
    var value = $('input#youtube').val();
        $.youtubeAPI(value);
    });


            $.youtubeAPI = function(kelime){
    var sonuc = $('#sonuc');
    sonuc.html('Arama gerçeklestiriliyor...');
    $.ajax({
        type: 'GET',
        url: 'http://gdata.youtube.com/feeds/api/videos?q=' + kelime + '&max-results=15&v=2&alt=jsonc',
        dataType: 'jsonp',
        success: function( veri ){
            if( veri.data.items ){
                sonuc.empty();
                $.each( veri.data.items, function(i, data) {
                    sonuc.append('<div class="youtube">\
                        <img src="' + data.thumbnail.sqDefault + '" alt="" />\
                        <h3><a href="javascript:void(0)" onclick="$.youtubePlay(\'' + data.id + '\', \'' + data.content[5] + '\')">' + data.title + '</a></h3>\
                        <p>' + data.description + '</p>\
                    </div>\
                    <div class="youtubeOynat" id="' + data.id + '"></div>');
                });
            }
            else {
                sonuc.html('<div class="hata"><strong>' + kelime + '</strong> ile ilgili hiç video bulunamadi!</div>');
            }
        }
    });
    }
            $.youtubePlay = function(yid, frame){
    $('.youtubeOynat').slideUp().empty();
    $('#'+yid).slideDown().html('<iframe src="'+ frame +'&autoplay=1" style="width: 100%; box-sizing: border-box; height: 300px" />');
    }
        });
    </script>

    <div class="arama">
    <form action="" onsubmit="return false">

        <div class="ui-widget">

            <input id="youtube" />
            <button id="submit" onClick='javascript:goTo()'>&#128269;</button>
        </div>
    </form>
    </div>


<script>

function goTo()
{
    location.href = document.getElementById('youtube').value;
}
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#youtube").autocomplete({
    source: function(request, response){
        /* Google Developer ID (optional) */
        var apiKey = 'AI39si7ZLU83bKtKd4MrdzqcjTVI3DK9FvwJR6a4kB_SW_Dbuskit-mEYqskkSsFLxN5DiG1OBzdHzYfW0zXWjxirQKyxJfdkg';
        /* Search keyword */
        var query = request.term;
        /* youtube sorgusu */
        $.ajax({
            url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q="+query+"&key="+apiKey+"&format=5&alt=json&callback=?",  
            dataType: 'jsonp',
            success: function(data, textStatus, request) { 
               response( $.map( data[1], function(item) {
                    return {
                        label: item[0],
                        value: item[0]
                    }
                }));
            }
        });
    },
    /* You can use transaction is selected here to */
    select: function( event, ui ) {
        $.youtubeAPI(ui.item.label);
    }
    });

            $('button#submit').click(function(){
    var value = $('input#youtube').val();
        $.youtubeAPI(value);
    });


            $.youtubeAPI = function(kelime){
    var sonuc = $('#sonuc');
    sonuc.html('Arama gerçeklestiriliyor...');
    $.ajax({
        type: 'GET',
        url: 'http://gdata.youtube.com/feeds/api/videos?q=' + kelime + '&max-results=15&v=2&alt=jsonc',
        dataType: 'jsonp',
        success: function( veri ){
            if( veri.data.items ){
                sonuc.empty();
                $.each( veri.data.items, function(i, data) {
                    sonuc.append('<div class="youtube">\
                        <img src="' + data.thumbnail.sqDefault + '" alt="" />\
                        <h3><a href="javascript:void(0)" onclick="$.youtubePlay(\'' + data.id + '\', \'' + data.content[5] + '\')">' + data.title + '</a></h3>\
                        <p>' + data.description + '</p>\
                    </div>\
                    <div class="youtubeOynat" id="' + data.id + '"></div>');
                });
            }
            else {
                sonuc.html('<div class="hata"><strong>' + kelime + '</strong> ile ilgili hiç video bulunamadi!</div>');
            }
        }
    });
    }
            $.youtubePlay = function(yid, frame){
    $('.youtubeOynat').slideUp().empty();
    $('#'+yid).slideDown().html('<iframe src="'+ frame +'&autoplay=1" style="width: 100%; box-sizing: border-box; height: 300px" />');
    }
        });
    </script>

    <div class="arama">
    <form action="" onsubmit="return false">

        <div class="ui-widget">
       
            <input id="youtube" />
            <button id="submit" onClick='javascript:goTo()'>&#128269;</button>
        </div>
    </form>
    </div>


<script>
  
function goTo()
{
    location.href = document.getElementById('youtube').value;
}
</script>

【讨论】：