sohu视频接口（下拉自动完成getJson）_json视频接口资源-CSDN文库

共6个文件

js：3个

asp：1个

html：1个

自动完成

GetJSON

3星 · 超过75%的资源需积分: 32 170 浏览量 2011-10-21 12:31:07 上传评论收藏 64KB RAR 举报

在IT行业中，自动完成功能是用户界面设计中一个非常重要的元素，特别是在搜索框中，它极大地提高了用户体验和效率。本教程将聚焦于如何利用Sohu视频接口结合JQuery的GetJSON方法来实现这一功能，同时使用AutoComplete插件进行辅助。让我们了解一下`GetJSON`。在JQuery库中，`$.getJSON()`是一个简洁的方法，用于从服务器获取JSON数据。它是一个异步函数，允许我们轻松地从服务器请求并处理JSON格式的数据。例如，当你在Sohu视频搜索框输入关键词时，`GetJSON`会向Sohu视频接口发送请求，获取与关键词相关的视频信息。 ```javascript $.getJSON('http://api.example.com/videos', { keyword: '你的关键词' }, function(data) { // 在这里处理返回的JSON数据 }); ``` 上述代码中，`http://api.example.com/videos`是Sohu视频的API URL，`{ keyword: '你的关键词' }`是你要传递的参数，`function(data)`则是当请求成功时执行的回调函数，`data`参数包含了从服务器返回的数据。接下来，我们引入AutoComplete插件。AutoComplete是一种UI组件，它能够根据用户输入的字符动态展示匹配的建议列表。在JQuery中，有许多开源的AutoComplete插件可供选择，如jQuery UI的AutoComplete，它易于集成且功能强大。以下是如何使用jQuery UI AutoComplete插件的基本示例： ```html <input id="searchBox" type="text" placeholder="搜索视频..."> <script> $(function() { var availableVideos = []; // 从GetJSON获取的视频数据 $("#searchBox").autocomplete({ source: availableVideos, minLength: 2, // 用户至少输入两个字符后开始提供建议 select: function(event, ui) { // 用户选择建议项后的处理逻辑 } }); }); </script> ``` 在这个例子中，`availableVideos`数组应由`$.getJSON`填充，当用户在搜索框中输入时，AutoComplete插件会从这个数组中查找匹配项。`minLength`属性定义了用户输入多少字符后开始显示建议，`select`事件则在用户选择一个建议项时触发，你可以在这里添加相应的处理逻辑，比如跳转到选定视频的播放页面。在Sohu视频接口的上下文中，你需要将`$.getJSON`的返回结果适当地转换并存储到`availableVideos`数组中，然后设置AutoComplete插件的`source`为这个数组，以实现自动完成的功能。通过结合使用`$.getJSON`获取Sohu视频接口的实时数据和AutoComplete插件的动态建议，我们可以创建一个高效的视频搜索体验。这个过程涉及到前端的AJAX请求、JSON数据解析以及UI交互，这些都是现代Web开发中的核心技能。在实际项目中，你可能还需要考虑错误处理、性能优化、用户体验等因素，确保功能的稳定性和流畅性。

资源推荐

资源详情

资源评论

收起资源包目录

sohu视频接口（下拉自动完成getJson）.rar （6个子文件）

sohu

script

jquery.autocomplete.js 21KB

jquery.autocomplete.css 797B

j_1.6.1_utf.js 90KB

jQuery1.4.2_mini.js 71KB

data.asp 1KB

sohu.html 6KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="script/jquery.autocomplete.css" type="text/css"> <script src="script/j_1.6.1_utf.js" type="text/javascript"></script> <script type="text/javascript" src="script/jquery.autocomplete.js"></script> <script type="text/javascript"> jQuery().ready(function($){ /*================================test use json*/ $("#btnTest").click(function() { sohuGetList2(); }); /*AutoComplete json*/ var sohuSearchUrl="http://api.tv.sohu.com/search.json?api_key=e5c8865ad74e7c26c874e599fd1fbdc1&callback=?"; $("#key").autocomplete(sohuSearchUrl, { dataType : 'json', // 必须填写，不然默认的是text autoFill : true, // 自动填充可选 mustMatch: true, extraParams : { key: function (){ return $('#key').val(); } },//支持像后台传递参数，key为你后台接收参数的名称 parse : function(data) { // 处理返回的json串，以供后续的使用 if(data.status == 200){ var videos = data.data.videos || []; var rows = []; // 处理后返回的一个数组 for ( var i = 0; i < videos.length; i++) { // 如果你返回的是一个类似{'my':[{'name':'value1'},{'name':'value2'}]} rows[rows.length] = { data : videos[i], //返回的参数,供后续的函数调用 value : videos[i].tv_name, //鼠标经过时在输入框显示的值 result : videos[i].tv_name //选中后在输入框显示的值 } } } return rows; }, formatItem : function(data, i, total) { //代表的是显示的格式 return data.tv_name; }, formatMatch : function(data, i, total) { //表示匹配的内容 return data; }, formatResult : function(data) { //表示结果的内容 return data; } }); //选定点击事件 $("#key").result(function(event, data, formatted) { //event: 事件对象. event.type为result. //data: 选中的数据行. // formatted:formatResult函数返回的值 if(data != undefined){ var tip_num = data.tip_num; var num = tip_num.substr(tip_num.indexOf('/')+1,tip_num.length-tip_num.indexOf('/')); sohuGetList(data.sid,num); } }); //获取sohu影片具体列表 var sohuGetList= function(sid,num){ $('ol').html('');//clear var reqUrl = "http://api.tv.sohu.com/set/list/"+sid+".json?api_key=e5c8865ad74e7c26c874e599fd1fbdc1&callback=?&pageSize=" + num; $('#aid').html(reqUrl); $.getJSON(reqUrl,function(data){ if(data.status == 200){ videos = data.data.videos || []; //alert(videos.length); for(var i=0;i<videos.length;++i){ var url="http://open.tv.sohu.com/play.do?api_key=e5c8865ad74e7c26c874e599fd1fbdc1&vid=" + videos[i].tv_ver_id; var title = videos[i].tv_name; $('<li></li>').html(title + ' | ' + url).appendTo('ol'); }//end for }//end if });//end getjson }; var sohuGetList2= function(){ $('ol').html('');//clear var url = sohuSearchUrl + "&key=" + $('#key').val(); $.getJSON(url,function(data){ if(data.status == 200){ videos = data.data.videos || []; var tip_num = videos[0].tip_num; var num = tip_num.substr(tip_num.indexOf('/')+1,tip_num.length-tip_num.indexOf('/')); var sid = videos[0].sid; sohuGetList(sid,num); }//end if });//end getjson }; /*============================end test use json*/ /*------------------------------search use xml*/ $("#btnSearch").click(function() { $('ol').html('');//clear var istv = $("#istv").attr("checked"); var kw = $("#title").val(); $.ajax({ url:"http://api.tv.sohu.com/search.xml?api_key=e5c8865ad74e7c26c874e599fd1fbdc1&key="+encodeURIComponent(kw), type: 'GET', dataType: 'xml', timeout: 10000, error: function(xml){ //alert('Error loading XML document'+xml); }, success: function(xml){ $(xml).find("item").each(function(i){ if(i==0) { var id=$(this).children("sid").text(); var tip_num = $(this).children("tip_num").text(); var num = tip_num.substr(tip_num.indexOf('/')+1,tip_num.length-tip_num.indexOf('/')); num = num +20; $("#aid").html(id + " | " + encodeURIComponent(kw) + " | " + num); /*根据电视id获取*/ $.ajax({ url:"http://api.tv.sohu.com/set/list/"+id+".xml?api_key=e5c8865ad74e7c26c874e599fd1fbdc1&pageSize=" + num, type: 'GET', dataType: 'xml', timeout: 10000, error: function(xml){ alert('Error loading XML document'+xml); }, success: function(xml){ $(xml).find("item").each(function(i){ var id=$(this).children("tv_ver_id").text(); var title=$(this).children("tv_name").text(); $('<li></li>').html(id + ' | ' + title).appendTo('ol'); }); } });//end ajax } }); //end each }//end success }); }); /*AutoComplete*/ $("#title").autocomplete("data.asp", { width: 320, max: 40, highlight: false, width:200, scroll: true, scrollHeight: 300, mustMatch :true, formatItem: function(data, i, n, value) { return value; }, formatResult: function(data, value) { return value.split(".")[0]; } }); }); //选定点击事件 // $("#title").result(function(event, data, formatted) { // if(data != undefined) // alert(data); // }); /*-------------------------------------end search use xml*/ </script> <style type="text/css"> ol{ float:left} #title{ width:200px} #sdiv{ width:100%; margin-top:20px;} </style> <title>SOHU</title> </head> <body> <input type="text" id="title" /><input type="button" id="btnSearch" value="search xml" /> <input name="key" id="key" type="text" class="tx" /> <input type="button" class="btn" id="btnTest" value="search json" /> <label></label> <div id="aid"></div> <div id="sdiv"><ol></ol></div> </body> </html>

评论收藏

内容反馈