如何调用带参数的回调函数？

Question

我目前正在使用 Wikipedia API 通过维基百科进行简单搜索，我有一个 <select> 下拉菜单和一个带有自动完成功能的简单输入。

我想做的是能够用不同的语言进行搜索，自动完成功能可以很好地处理各种语言，但是当我尝试通过单击我的一种自动完成功能进行搜索时 link就这样 returns "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>

在APIlink中有一个参数"callback"调用我的函数（ybComplete()），我怎么告诉link是可以根据 lang 变量更改语言吗？

Answer 1

不要传递 lang。从 select

获取

这是一个更好的版本，可以在您更改语言时重新搜索

// 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>

Answer 2

这是一个简单的解决方案。
不要使用 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;

如何调用带参数的回调函数？

How can I call a callback functions with parameters?

javascript

html

wikipedia

wikipedia-api