时间戳

首页 > 解决方案 > 如何调用带参数的回调函数？

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

问题描述

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

我想要做的是能够以不同的语言进行搜索，自动完成功能适用于语言，但是当我尝试通过单击我的自动完成链接之一进行搜索时，它会返回“未定义”。（例如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变量更改语言？

标签： javascripthtmlwikipediawikipedia-api

解决方案

不要通过lang。从选择中获取

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

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

推荐阅读