如何向搜索引擎添加其他GIF [英] How do I add additional gifs to my search engine
问题描述
你好我已经创建了一个搜索引擎，在这种情况下你可以搜索任何游戏，然后会出现一个gif。我试图每次搜索总共添加6个GIF，但我已经失败了无数次。我希望我的代码可以澄清我想要做的事情，我在下面提供了我的代码。我非常感谢你的帮助。谢谢
Hello I've created a search engine in which case you can search any game and a gif would appear. I am trying to add a total of 6 gifs per search but I have failed countless times. I hope my code can clarify what i am trying to do in which i have provided my code below. I would greatly appreciate the help. Thank You
<!DOCTYPE html>
<html>
<head>
<title>Games website</title>
</head>
<body>
<h1> Game Search </h1>
<div class="info">
<p> Search </p>
<form class="gif-form">
<input type="text" id="form-value" class="search-input-rounded">
<button type="submit" class="search_button"> Search for Games </button>
<input type="reset" id="reset_button" value="Reset">
</form>
<div class="rando_facts animated bounceIn">
<img id="here_is_gif" src=""/>
</div>
</div>
<!-- Link in jQuery from CDN -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- My JavaScript -->
<script type="text/javascript">
// This waits for the page to load before calling our jQuery
$( document ).ready(function(){
// Part 1 - Collect User Input Using jQuery Click Listener note we use the class (.) of search_button
$('.search_button').on('click', function(){
// Collect user by grabbing the input form's value via id (#)
var userInput = $('#form-value').val().trim();
// Change the input to suit the API (ie change spaces to +)
userInput = userInput.replace(/ /g, "+");
// Create the Giphy API URL
var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + userInput + "&limit=6&api_key=dc6zaTOxFJmzC";
// Part 2 - Use AJAX to call GIPHY API (note that the .done() function waits for the API to respond)
$.ajax({url: queryURL, method: 'GET'}).done(function(response){
// This is the API response data. It's a JSON object of 25 gifs
console.log(response.data);
// For simplicity, we will take the first gif (ie. at postion 0)
var giphyURL = response.data[0].images.fixed_height.url;
console.log(giphyURL)
// Now you can pass that into your "here_is_gif" <img> tag using its id (#)
$('#here_is_gif').attr('src', giphyURL);
});
// Part 3 - Clear the Gif using the reset_button id (#)
$('#reset_button').on('click', function(){
// Grab the img using the id and change the src to empty to remove the image
$('#here_is_gif').attr("src",'');
})
// If using a jQuery click listner on a Submit button, you need to return false to prevent the default page refresh
return false;
})
});
</script>
</body>
</html>
我尝试过：
我尝试过切换几个代码，但我没有成功，因为我是一个新手，当谈到JavaScript时，我非常不成功，我真的很感激，如果有人可以帮助我当用户在游戏名称中键入时，添加总共6个gif。谢谢
What I have tried:
I have tried switching a couple of codes around but I was not successful because i am such a novice when it comes to JavaScript I was very unsuccessful and i would really appreciate it if someone can help me add a total of 6 gifs to appear as the user types in a name of a game. Thank you
推荐答案
（document）.ready（function（）{
//第1部分 - 使用jQuery点击监听器注释收集用户输入我们使用search_button的类（。）
( document ).ready(function(){ // Part 1 - Collect User Input Using jQuery Click Listener note we use the class (.) of search_button
（'。search_button'）。on（'click'，function（）{
//收集用户通过id（＃）获取输入表单的值
var userInput =
('.search_button').on('click', function(){ // Collect user by grabbing the input form's value via id (#) var userInput =
（'＃form-value'）。val（）。trim（）;
//更改输入以适应API（即将空格更改为+）
userInput = userInput.replace（/ / g，+）;
//创建Giphy API URL
var queryURL =http://api.giphy.com/v1/gifs/search?q=+ userInput +& limit = 6& api_key = dc6zaTOxFJmzC;
//第2部分 - 使用AJAX调用GIPHY API（注意.done（）函数等待API响应）
('#form-value').val().trim(); // Change the input to suit the API (ie change spaces to +) userInput = userInput.replace(/ /g, "+"); // Create the Giphy API URL var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + userInput + "&limit=6&api_key=dc6zaTOxFJmzC"; // Part 2 - Use AJAX to call GIPHY API (note that the .done() function waits for the API to respond)
这篇关于如何向搜索引擎添加其他GIF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
