Question

我的问题是我使用谷歌youtube搜索API和谷歌自定义搜索API搜索图像和视频。如果我只搜索图像或视频，图像和视频搜索完美。

但现在我想基于下拉列表选择搜索图像和视频。如果在下拉列表中我只根据文本框值选择视频搜索视频，如果我选择图像搜索仅基于文本框值的图像。

请帮我怎么做。

＆＃13;

/*code for image search in Google custom search API*/  
  
  $(document).ready(function(){

$('#findNow').trigger('click')
});


$('#findNow').on('click',function(){
 document.getElementById("content11").innerHTML ="";
 document.getElementById("content12").innerHTML ="";
var a =$('#search1').val();
var url = "https://www.googleapis.com/customsearch/v1?key= Your Google Custom Search API Key &cx=005124428384360536924:rstfldysumw&q="+a+"&searchType=image&safe=high";
  var jqxhr = $.getJSON(url, function() {
    console.log("success");
  }).done(function(data) {
    for (var i = 0; i < 12; i++) {
      var item = data.items[i];
      
      document.getElementById("content11").innerHTML += "<div class='col-md-3 c'>" + "<div class='b'><a class='add_img'><img src=" + item.link + " height=200px  class='thumbnail' width=200px /></a></div><div class='a mn-video-title'> " + item.title + "</div></div>";
      document.getElementById("content12").innerHTML += "<a href='#_' class='lightbox' ><img src=" + item.link + " /></a>";
      $('.lightbox').each(function(i){
        var a = 'img' + (i++);
        $(this).attr('id',a);
      });
      $('.add_img').each(function(i){
        var b = '#img' + (i++);
        $(this).attr('href', b);
      });
    }
  }).fail(function(data) {
    console.log("error");
  });
});



/*Code for Video serch in Google Youtube search API*/
var gapikey = 'Your Youtube Search API Key';

  $(function() {
    
    // call fancybox pluggin
    $(".fancyboxIframe").fancybox({
        maxWidth    : 900,
        maxHeight    : 600,
        fitToView    : false,
        width        : '90%',
        height        : '90%',
        autoSize    : false,
        closeClick    : false,
        openEffect    : 'none',
        closeEffect    : 'none',
        iframe: {
            scrolling : 'auto',
            preload   : true
        }
    });
    
    $('#search-form').submit( function(e) {
        e.preventDefault();
    });
  });

  function searchYoutube() {
    $('#results').html('<i class="fa fa-spinner fa-pulse fa-3x fa-fw"><\/i><span class="sr-only">Loading...<\/span>');

    
    // run get request on API
    $.get(
        "https://www.googleapis.com/youtube/v3/search", {
            part: 'snippet, id',
            q: 'funny',
            type: 'video',
            safeSearch: 'strict',
            maxResults: 100,
            key: gapikey
        }, function(data) {

            $('#results').html(''); // hide loading
            $.each(data.items, function(i, item) {
                
                // Get Output
                var output = getOutput(item);
                
                // display results
                $('#results').append(output);
            });

        });
  }

  // Build output
  function getOutput(item) {
    var videoID = item.id.videoId;
    var title = item.snippet.title;
    var description = item.snippet.description;
    var thumb = item.snippet.thumbnails.high.url;
    var channelTitle = item.snippet.channelTitle;
    var videoDate = item.snippet.publishedAt;
    
    // Build output string
    var output =        '<div class="col-md-3">' +
        '<a data-fancybox-type="iframe" class="fancyboxIframe" href="http://youtube.com/embed/'+ videoID + '?rel=0">' +'<img src="' + thumb + '" class="img-responsive thumbnail" >' + '<\/a>' + 
        '<a data-fancybox-type="iframe" class="fancyboxIframe" href="http://youtube.com/embed/' + videoID + '?rel=0">' + '<div class="mn-video-t	itle">'+ title + '<\/div> '+'<\/a>' +
    '<\/div>'+
       '<\/div>';
    return output;
  }

  window.onload = searchYoutube();
function searchYoutube() {
    $('#results').html('<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="sr-only">Loading...</span>');
    $('#buttons').html('');
    
    // get form input
    q = $('#search').val(); 
    
    // run get request on API
    $.get(
        "https://www.googleapis.com/youtube/v3/search", {
            part: 'snippet, id',
            q: q,
            type: 'video',
            key: gapikey
        }, function(data) {
            var nextPageToken = data.nextPageToken;
            var prevPageToken = data.prevPageToken;
            
            // Log data
            console.log(data);
            $('#results').html(''); // hide loading
            $.each(data.items, function(i, item) {
                
                // Get Output
                var output = getOutput(item);
                
                // display results
                $('#results').append(output);
            });
            
            var buttons = getButtons(prevPageToken, nextPageToken);
            
            // Display buttons
            $('#buttons').append(buttons);
        });
}

＆＃13;

<html>
<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css">
  

</head>
<body>
<div class="module-surround"> 
  <form role="form" method="post" enctype="multipart/form-data">

      <div class="form-group col-md-6">
        <label class="co" for="usrname">Search</label>
          <input type="text" class="form-control" id="search1" placeholder="Search Here.." name="sear">
      </div>

      <div class="form-group col-md-6">
        <label class="co" for="psw">Category</label>
        <select name="search"  class="form-control">
          <option value="image">IMAGE</option>
          <option value="vidio">VIDIO</option>
        </select>
			</div>

      <div class="form-group">
        <div class="col-md-12">
            <button type="submit" class="btn btn-blue btn-effect" name="searc">search</button>
        </div>
      </div>

  </form>

  <div class="module-content ima">
    <div class="content row" id="content11"></div>
  </div>
  
</div>
          
<div id="content12"></div>
<?php
 if(isset($_POST['searc']))
	{
            $cate=$_POST['search'];
            print_r($cate);
            if($cate == vidio)
            {
            ?>
</body>
</html>

＆＃13;

如何根据DropdownList选择搜索图像和视频

0 个答案: