один поиск введите несколько имен - PullRequest
Новая
       12

один поиск введите несколько имен

0 голосов
/ 29 сентября 2018

Итак, я работаю над веб-сайтом, где у вас есть одна панель поиска, и вы можете выполнять поиск на нескольких веб-сайтах, таких как Google, Amazon, YouTube и некоторые другие.Моя проблема заключается в том, что все это в одной форме, и я не могу использовать name = "q", которое работает с большинством API-интерфейсов поиска в amazon и wikipedia, потому что есть имена 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 голосов
/ 30 сентября 2018

Вы можете просто сохранить атрибут 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');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input data-input-search 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>Google</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>YouTube</button>
  <button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" data-search-input-name="k" target="_blank"><span><i class="fa fa-amazon animated"></i></span>Amazon</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>Translate</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>Images</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>Netflix</button>
  <button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?" data-search-input-name="search"><span><i class="fa fa-wikipedia-w animated"></i></span>Wikipedia</button>
</form>

Примечание : только кнопка Википедии работает здесь как блок Google / Amazon, который блокируется из iframe, но вы можете проверить Википедию.

0 голосов
/ 30 сентября 2018

Например, вы можете:

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, чтобы это работало.)

...