一个搜索输入多个名称

时间:2018-09-29 20:52:32

标签: javascript html html-input

因此,我正在一个网站上工作,该网站上有一个搜索栏,并且可以搜索多个网站,例如google,amazon,youtube等。我的问题是,所有这些都以一种形式存在,并且我不能使用name =“ q”来处理大多数亚马逊和Wikipedia上的搜索api,因为名称k(amazon)和search(wikipedia) 。有谁知道如何更改两个按钮输入的名称?

以下是链接:https://multi-search.bss.design/

<form target="_blank">
  <input class="form-control visible" type="search" name="q" autofocus="" autocomplete="off" id="input" placeholder="Search...">
  <button class="btn btn-primary btn-circle" type="submit" value="Google" formaction="http://www.google.de/search" target="_blank" value="Google"><span><i class="fa fa-google animated" ></i></span></button>
  <button class="btn btn-primary btn-circle" type="submit" value="YouTube" formaction="https://www.youtube.com/search" target="_blank"><span><i class="fa fa-youtube-play animated"></i></span></button>
  <button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" target="_blank"><span><i class="fa fa-amazon animated"></i></span></button>
  <button class="btn btn-primary btn-circle" type="submit" value="Google Translate" formaction="https://translate.google.com/#auto/de/" target="_blank"><span><i class="fas fa-language animated"></i></span></button>
  <button class="btn btn-primary btn-circle" type="submit" value="Google Images" formaction="http://www.google.com/images?q"><span><i class="fa fa-image animated"></i></span></button>
  <button class="btn btn-primary btn-circle" type="submit" value="Netflix" formaction="https://www.netflix.com/search?q"><span><i class="fa fa-film animated"></i></span></button>
  <button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?"><span><i class="fa fa-wikipedia-w animated"></i></span></button>
</form>

2 个答案:

答案 0 :(得分:0)

您可以例如:

1。。添加隐藏字段

<input type="search" name="q" onkeyup="updateHiddenFields()">
<input type="hidden" name="k">

,然后使用JS代码进行同步:

const updateHiddenFields = (evt) => {
   document.getElementsByName('k')[0].value = document.getElementsByName('q') .[0].value 
};

2。。单击按钮时重命名字段:

document.getElementById('button-amazon')[0].onclick = () => document.getElementsByName('q')[0].setAttribute('name', 'k');

(将id="button-amazon"添加到Amazon按钮以使其正常工作。)

答案 1 :(得分:0)

您只需在代表相应Lemma less_than_two_equivalent x: less_than' x 2 = true -> x < 2. Proof. do 2 (destruct x; auto). discriminate. Qed. 属性(默认为data-)的每个按钮上存储一个name属性,并在单击时动态更改它即可。

例如: q

<button ... type="submit" value="Wikipedia" data-search-input-name="search">
document.querySelectorAll('button[type="submit"]').forEach(function(submitButton) {
  submitButton.addEventListener('click', function(e) {
    document.querySelector('[data-input-search]').setAttribute('name', 
      this.getAttribute('data-search-input-name') || 'q');
  });
});

注意:只有Wikipedia按钮在这里用作Google / Amazon阻止来自iframe的按钮,但是您可以测试Wikipedia。