CODEWITHSUNDEEP
javascript
Wally Glascoff
Wally Glascoff

Reputation: 39

How to make my search bar complete its search

So, I'm trying to write this restaurant Finder app (just a fun project for myself), and I want there to be a search bar to connect what the user has typed (say chicken) into Yelp and be able to search for chicken restaurants. Yelp's url for that is this: https://www.yelp.com/search?find_desc=chicken&find_loc=Richfield%2C%20MN. I want to be able to take "https://www.yelp.com/search?find_desc=", add x (what the user inputs), and then have the program piece it all together: "https://www.yelp.com/search?find_desc=" + "user search query". Doing it like this just brings me to "https://www.yelp.com/search?find_desc=&find_loc=Richfield%2C+MN". Any ideas?

<div id='content'>
    <div id='content-app'>
        <input type='text' id='field1' readonly value=''/> 
        <button onclick='search(<a href="https://www.yelp.com/search?cflt=)' id='search' style='width:80px'><a href="https://www.yelp.com/search?find_desc=" + "field1 readonly value text">Search</button>

Upvotes: 0

Views: 183

Answers (1)

fubar
fubar

Reputation: 17388

There are a number of mistakes in the code that you've posted.

I've created an example below based on what I think you're trying to accomplish. This example demonstrates how to take the input from a text field, build a request URL, and redirect the browser to that URL.

function search() {
  // Get value from search text field
  var search = document.getElementById('search').value;
  
  // Build Yelp request URL
  var yelpUrl = 'https://www.yelp.com/search?find_desc=' + search;
  
  // Redirect browser to Yelp request URL
  window.location = yelpUrl;
}
<input id="search" type="text" />
<button onclick="search()">Search</button>

The example can be improved further by not using onclick(), and to instead use the addEventListener() function. But I think you can work up to using that.

Upvotes: 1

Related Questions