Создайте одно окно поиска, которое будет искать два разных сайта, используя javascript - PullRequest
Новая
       1

Создайте одно окно поиска, которое будет искать два разных сайта, используя javascript

0 голосов
/ 31 января 2020

Я сделал несколько окон поиска, которые ищут внешние словарные сайты. Из-за синтаксиса поиска по сайту мне пришлось использовать JavaScript для создания URL-адреса из текстового поля ввода. Этот код прекрасно работает: 

function prepare_link_glosbe() {
      var url_param_gl = document.getElementById('url_param_gl');
      var target_link_gl = document.getElementById('target_link_gl');

      if ( ! url_param_gl.value ) {
           return false;  
      }

      target_link_gl.href = "https://nb.glosbe.com/en/nb"
      target_link_gl.href = target_link_gl.href + '/' + encodeURI(url_param_gl.value);
      window.open(target_link_gl.href, '_blank')
 }
 function prepare_link_dict() {
      var url_param_dict = document.getElementById('url_param_dict');
      var target_link_dict = document.getElementById('target_link_dict');

      if ( ! url_param_dict.value ) {
           return false;  
      }

      target_link_dict.href = "https://www.dict.com/engelsk-norsk"
      target_link_dict.href = target_link_dict.href + '/' + encodeURI(url_param_dict.value);
      window.open(target_link_dict.href, '_blank')
 }
<!--Search Glosbe.com-->
<div style="border:0px solid black;padding:8px;width:60em;">
<table border="0" cellpadding="2">
<tr><td>
<input type="text" onfocus="this.value=''" value="Search glosbe.com" name="url_param_gl" id="url_param_gl" size="40"/>
<input type="button" onclick="prepare_link_glosbe()" value="Glosbe (en-no)" />
<a href="https://nb.glosbe.com/en/nb" id="target_link_gl" target="_blank" ></a>
</td></tr></table></div>

<!--Search Dict.com-->
<div style="border:0px solid black;padding:8px;width:60em;">
<table border="0" cellpadding="2">
<tr><td>
<input type="text" onfocus="this.value=''" value="Search dict.com" name="url_param_dict" id="url_param_dict" size="40"/>
<input type="button" onclick="prepare_link_dict()" value="Dict (en-no)" />
<a href="https://www.dict.com/engelsk-norsk" id="target_link_dict" target="_blank" ></a>
</td></tr></table></div>

Однако я могу sh искать оба сайта, используя одно поле ввода. Я пробовал разные подходы, в том числе addEventListener, но я не достаточно свободно владею либо HTML, либо JavaScript, чтобы добиться этого. Кто-нибудь может указать мне правильное направление?

1 Ответ

1 голос
/ 31 января 2020

Прежде всего, некоторые вещи, которые облегчат вашу жизнь в долгосрочной перспективе:

  1. Вам не нужно this.value='', просто используйте атрибут placeholder - он хорошо поддерживается.
  2. Не используйте <table> для создания макета.
  3. Не используйте атрибуты для назначения JS обработчиков событий. (поэтому нет onclick=)

А теперь, как использовать только одно текстовое поле для обоих веб-сайтов - просто удалите второе поле и переместите кнопку в другое место. Вот пример: 

// This is our search input field.
const searchValue = document.getElementById('search_value');

// Here I'm looking for all search buttons and iterating over them
// with for ... of, querySelectorAll accepts valid CSS selectors.
for (let button of document.querySelectorAll('.search_button')) {
    // Getting the data-url attribute value from the button.
    const url = button.dataset.url;

    // Adding a click event handler, instead of relying on onclick=''
    button.addEventListener('click', function () {
        // Quick string replace...
        const targetURL = button.dataset.url.replace('%s', encodeURI(searchValue.value));
        // ...and here we open the new tab.
        window.open(targetURL, '_blank');
    });
}
<div>
    <input type="text" placeholder="Search..." id="search_value" />
    <button class="search_button" data-url="https://nb.glosbe.com/en/nb/%s">Glosbe (en-no)</button>
    <button class="search_button" data-url="https://www.dict.com/engelsk-norsk/%s">Dict (en-no)</button>
</div>

Вот объяснение:

  1. Я использую атрибуты HTML data- * (доступны в JS через element.dataset.*) для хранения URL, %s используется в качестве заполнителя для поискового значения и будет позже заменен функцией .replace.
  2. Вместо того, чтобы вручную назначать идентификаторы для кнопок, которые я объявил класс - это позволяет бесконечно расширять приложение.
  3. Я объединил поля ввода в одно и прочитал его значение в обработчике событий кнопки.
  4. Я заменил ваш this.value='' взломать с правильным заполнителем.
  5. Я удалил макет таблицы, если вы добавите sh, чтобы добавить более приятный макет или стиль, я бы посоветовал узнать больше о CSS - также: don не использовать HTML атрибутов для элементов стиля (кроме класса и стиля). Избегайте использования селекторов идентификаторов также в CSS (это нормально в JS, но в CSS это может вызвать проблемы, когда дело доходит до важности). Кроме того, вы все равно должны избегать атрибута стиля - он будет иметь приоритет над большинством CSS правил, за исключением правил с !important и вызывает дублирование кода.
...