Как я могу вызвать функции обратного вызова с параметрами? - PullRequest
Новая
       70

Как я могу вызвать функции обратного вызова с параметрами?

1 голос
/ 26 мая 2020

Сейчас я использую Wikipedia API для простого поиска в Википедии, у меня есть раскрывающийся список <select> и простой ввод с автозаполнением.

Что я пытаюсь сделать это, чтобы иметь возможность искать на разных языках, автозаполнение отлично работает с языками, но когда я пытаюсь выполнить поиск, щелкнув одну из моих ссылок автозаполнения, он возвращает «undefined». (например, undefined.wikipedia.org вместо en.wikipedia.org)

Вот что я пробовал до сих пор: 

// Function to select id
var yb = {
  id: function(str) {
    return document.getElementById(str);
  },
};

var tag = "";

// When user is typing
yb.id("search").onkeyup = function(e) {
  if (!e.keyCode.toString().match(/^(37|38|39|40|13|16|17|18|224)$/)) {
    if (tag !== "") {
      document.body.removeChild(tag);
    }

    tag = document.createElement("script");
    var term = yb.id("search").value;
    var lang = yb.id("lang").value;

    // API link
    tag.src =
      "https://" + lang + ".wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=ybComplete&search=" +
      term;
    document.body.appendChild(tag);
  }
};

// The search function
function ybComplete(data, lang) {
  yb.id("wikiOutput").innerHTML = "";

  for (var i = 0; i < 5; i++) {
    if (data[1][i]) {
      yb.id("wikiOutput").innerHTML +=
        '<p><b><a href="https://' + lang + '.wikipedia.org/wiki/' +
        data[1][i] +
        '">' +
        data[1][i] +
        "</a></b><br>" +
        data[2][i] +
        "</p>";
    }
  }
}
<input id="search" name="search" type="text" autocomplete="off" />
<select id="lang" name="lang">
  <option value="en" selected="selected">Language</option>
  <option value="en">English</option>
  <option value="fr">French</option>
</select>

<div id="wikiOutput"></div>

В ссылке API есть параметр «обратный вызов», который вызывает мою функцию (ybComplete()), как я могу указать ссылку, чтобы можно было изменить язык на основе переменной lang?

Ответы [ 2 ]

0 голосов
/ 26 мая 2020

Вот простое решение. Вместо использования ybComplete в качестве обратного вызова используйте эту функцию: 

beforeYbComplete(data){
   ybComplete(yb.id("lang").value, data)
}

И измените эту строку в handleSearch: 

// API link
tag.src = "https://" + lang + ".wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=beforeYbComplete&search=" + term;
0 голосов
/ 26 мая 2020

Не передавайте язык. Получите его из выбора

вот лучшая версия, которая повторяет поиск при смене языка 

// Function to select id
var yb = {
  id: function(str) {
    return document.getElementById(str);
  },
};

let keyupEvent = new Event('keyup');
let wiki = "https://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=ybComplete&search="
let tag = "";

// When user is typing
yb.id("search").addEventListener("keyup", function(e) {
  if (!e.keyCode || !e.keyCode.toString().match(/^(37|38|39|40|13|16|17|18|224)$/)) {
    if (tag !== "") {
      document.body.removeChild(tag);
    }

    tag = document.createElement("script");
    const term = yb.id("search").value;
    // API link
    tag.src = wiki + encodeURIComponent(term);
    document.body.appendChild(tag);
  }
});

yb.id("lang").addEventListener("change", function() {
  wiki = wiki.replace(/[a-z]{2}\.wikipedia\.org/,this.value+".wikipedia.org")
  yb.id("search").dispatchEvent(keyupEvent)
})

// The search function
function ybComplete(data) {
  yb.id("wikiOutput").innerHTML = "";
  const lang = yb.id("lang").value
  for (var i = 0; i < 5; i++) {
    if (data[1][i]) {
      yb.id("wikiOutput").innerHTML +=
        '<p><b><a href="https://' + lang + '.wikipedia.org/wiki/' +
        data[1][i] +
        '">' +
        data[1][i] +
        "</a></b><br>" +
        data[2][i] +
        "</p>";
    }
  }
}
<input id="search" name="search" type="text" autocomplete="off" />
<select id="lang" name="lang">
  <option value="en" selected="selected">Language</option>
  <option value="en">English</option>
  <option value="fr">French</option>
</select>

<div id="wikiOutput"></div>
...