尝试使用Jquery检索基于关键字的可能YouTube视频列表

时间:2015-01-06 23:05:18

标签: jquery asp.net json youtube jsonp

请帮忙!请。

我想让用户输入"关键字"进入一个搜索框,我试图从Youtube(仅限标题)返回可能的Youtube电影列表,这样我就可以将它们绑定到我的文本框的自动完成功能:

我正在尝试使用此代码:

http://jsfiddle.net/0hnwf414/

     $(document).ready(function () {
$("#show").click(function () {
    getYoutube($("#Search").val());
});
  });

   function getYoutube(title) {
        $.ajax({
          type: "GET",
           url: yt_url = 'http://gdata.youtube.com/feeds/api/videos?q=' + title + '&format=5&max-results=1&v=2&alt=jsonc',
    dataType: "jsonp",
    success: function (response) {
        if (response.data.items) {
            $.each(response.data.items, function (i, data) {
                var video_id = data.id;
                var video_title = data.title;
                var video_viewCount = data.viewCount;

                var video_frame = "<iframe width='600' height='385' src='http://www.youtube.com/embed/" + video_id + "' frameborder='0' type='text/html'></iframe>";

                var final1 = "<div id='title'>" + video_title + "</div><div>" + video_frame + "            </div><div id='count'>" + video_viewCount + " Views</div>";
                   $("#result").html(final1);
             });
            } else {
                $("#result").html("<div id='no'>No Video</div>");
            }
        }
    });
         }


      <input type="text" id="Search" />
      <br/>
       <input id="show" type="button" value="Submit" />
         <div id="result"></div>

1 个答案:

答案 0 :(得分:0)

您正在渲染视频框架,这是导致它在列表中呈现youtube框架的原因。像下面一样删除它,它应该工作。

var final1 = "<div id='title'>" + video_title + "</div><div id='count'>" + video_viewCount + " Views</div>";
               $("#result").html(final1);