时间戳

首页 > 解决方案 > 有没有办法将多个搜索功能组合成一个下拉选择？

javascript - 有没有办法将多个搜索功能组合成一个下拉选择？

问题描述

我有多个搜索功能/文本框，我想将它们压缩成一个文本框 + 下拉选择。

http://jsfiddle.net/rhnt9vme/3/

<div>
  <form>
    <input type='text' id='searchOneInput' />
    <button type='submit' onclick='searchOne()' target="_blank">Search 1</button>
  </form>
</div><br>

<div>
  <form>
    <input type='text' id='searchTwoInput' />
    <button type='submit' onclick='searchTwo()' target="_blank">Search 2</button>
  </form>
</div><br>

<div>
  <form>
    <input type='text' id='searchThreeInput' />
    <button type='submit' onclick='searchThree()' target="_blank">Search 3</button>
  </form>
</div><br>

function searchOne(){
    var searchOneInput = document.getElementById('searchOneInput').value;
    window.open("http://one.com/search=" + searchOneInput);
}

function searchTwo(){
    var searchTwoInput = document.getElementById('searchTwoInput').value;
    window.open("http://two.com/search=" + searchTwoInput);
}

function searchThree(){
    var searchThreeInput = document.getElementById('searchThreeInput').value;
    window.open("http://three.com/search=" + searchThreeInput);
}

我想将这些组合成一个下拉选择单个文本框搜索，如下所示：

<form>
  <input type="text" id="userInput" />
  <select id="dropdown">
    <option value="">Search 1</option>
    <option value="">Search 2</option>
    <option value="">Search 3</option>
  </select>
  <button type="submit" onclick="">Search</button>
</form>

标签： javascripthtml

解决方案

document.getElementById("searchForm").addEventListener("submit", function(ev) {
  ev.preventDefault(); // Comment out if not needed
  
  var dropdownURL = document.getElementById("dropdown").value;
  var searchInput = document.getElementById("userInput").value.trim();
  var address = dropdownURL + searchInput;
  
  console.log(address);
  window.open(address);
});
<form id="searchForm">  <!-- PS: add ID to form -->
  <input type="text" id="userInput">
  <select id="dropdown">
    <option value="http://one.com/?search=">Search 1</option>
    <option value="http://two.com/?search=">Search 2</option>
    <option value="http://three.com/?search=">Search 3</option>
  </select>
  <button type="submit">Search</button>
</form>

如果您需要一个带有附加后缀查询参数的组合 URI字符串，例如

https://example.com/?search=**USERINPUTHERE**&c=%2FDefault.asp

比您可以在一组不允许使用 URI的字符中使用占位符，例如|，并使用用户输入字符串替换它String.prototype.replace()

document.getElementById("searchForm").addEventListener("submit", function(ev) {
  ev.preventDefault(); // Comment out if not needed
  
  var dropdownURL = document.getElementById("dropdown").value;
  var searchInput = document.getElementById("userInput").value.trim();
  
  // Replace "|" with the user input
  var address = dropdownURL.replace(/\|/, searchInput);
  
  console.log(address);
  window.open(address);
});
<form id="searchForm">  <!-- PS: add ID to form -->
  <input type="text" id="userInput">
  <select id="dropdown">
    <option value="http://one.com/?search=|">Search 1</option>
    <option value="http://two.com/?search=|">Search 2</option>
    <option value="http://three.com/?search=|">Search 3</option>
    <option value="https://four.com/?search=|&c=%2FDefault.asp">Search 4</option>
  </select>
  <button type="submit">Search</button>
</form>

PS：由于查询参数的顺序并不重要，您始终可以定义您的字符串，例如：https://example.com/?c=%2FDefault.asp&search=并使用第一个示例。

推荐阅读