Reputation: 69

Working with Input + keyup + value and then giphy

I would like to get whatever user search via input after he will stop typing. Then i would like to pass it to giphy api but there i have a problem with passing variable/result. Here is my code :

const mainInput = document.querySelector(".main-input");
mainInput.addEventListener('keyup', getUserQuery);

function getUserQuery(e) {
    let timeout = null;
    let userQuery;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        return userQuery = mainInput.value;
    },300)
    return userQuery;
}

//function makeUrlForSearch(getUserQuery) {
//    let a = getUserQuery();
//    console.log(a);
//}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}

.header {
    padding: 1rem;
    margin: 1rem auto; 
}

.header-title {
    font-size: 2rem;
}

.main-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wyszkuj Gipha!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header"><h1 class="header-title">Wyszukaj Gipha!</h1></header>
    <main class="main">
        <form class="main-form">
            <input type="text" placeholder="Wyszukaj Gipha!" class="main-input" id="main-input">
        </form>
    </main>
<script src="main.js"></script>
</body>
</html>

the makerUrlForSearch is not working and i've beend siting on it for a while but its not working.

Can anyone help? So that i would get search made by user after 300ms after he stops typing and then use it in giphy api, but i cannot do it :(

Upvotes: 1

Answers (2)

Vasile Florin Vilsan

Reputation: 315

Below you can find a solution to your problem by using debounce function from lodash

I have made changes below. Added a raw debounce function.

function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};

$(document).ready(function(){

  function makeUrlForSearch(query) {
     let a = query;
      console.log(a);
  }
  function getUserQuery(e) {
      makeUrlForSearch(e.target.value);
  }
 document.querySelector(".main-input").addEventListener('keyup', debounce(getUserQuery, 300));
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}

.header {
    padding: 1rem;
    margin: 1rem auto; 
}

.header-title {
    font-size: 2rem;
}

.main-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wyszkuj Gipha!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header"><h1 class="header-title">Wyszukaj Gipha!</h1></header>
    <main class="main">
        <form class="main-form">
            <input type="text" placeholder="Wyszukaj Gipha!" class="main-input" id="main-input">
        </form>
    </main>
<script src="main.js"></script>
</body>
</html>

Upvotes: 1

Guillaume Georges

Reputation: 4020

There were a couple issues in the code you provided :

In getUserQuery function, you're returning userQuery before the asynchronous setTimeOut sets its value.
The makeUrlForSearch function is calling getUserQuery but is never called. I switched that and made it so getUserQuery calls the makeUrlForSearch function
In getUserQuery, the timeout declaration would always erase previous timeouts. I moved the let timeout = null instruction outside of your getUserQuery function to make it global so that a getUserQuery call can clear a previous timeout.

const mainInput = document.querySelector(".main-input");
mainInput.addEventListener('keyup', getUserQuery);
let timeout;

function getUserQuery(e) {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        makeUrlForSearch(mainInput.value);
    },300);
}

function makeUrlForSearch(getUserQuery) {
    //let a = getUserQuery();
    console.log(getUserQuery);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}

.header {
    padding: 1rem;
    margin: 1rem auto; 
}

.header-title {
    font-size: 2rem;
}

.main-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wyszkuj Gipha!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header"><h1 class="header-title">Wyszukaj Gipha!</h1></header>
    <main class="main">
        <form class="main-form">
            <input type="text" placeholder="Wyszukaj Gipha!" class="main-input" id="main-input">
        </form>
    </main>
<script src="main.js"></script>
</body>
</html>

Upvotes: 1

Working with Input + keyup + value and then giphy

Answers (2)

Related Questions