如何让我的搜索栏完成搜索

Question

所以，我正在尝试编写这个餐厅 Finder 应用程序（对我来说只是一个有趣的项目），并且我希望有一个搜索栏来将用户输入的内容（比如鸡肉）连接到 Yelp 中并能够搜索鸡肉餐馆。Yelp 的网址是：https ://www.yelp.com/search?find_desc=chicken&find_loc=Richfield%2C%20MN 。我希望能够使用“ https://www.yelp.com/search?find_desc= ”，添加 x （用户输入的内容），然后让程序将它们拼凑在一起：“ https://www. yelp.com/search?find_desc=“+ ”用户搜索查询。这样做只会让我进入“ https://www.yelp.com/search?find_desc=&find_loc=Richfield%2C+MN ”。有任何想法吗？<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>

Answer 1

您发布的代码中有许多错误。

我根据我认为您要完成的任务在下面创建了一个示例。此示例演示如何从文本字段获取输入、构建请求 URL 并将浏览器重定向到该 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>

该示例可以通过不使用onclick(), 而是使用该addEventListener()函数来进一步改进。但我认为你可以努力使用它。