Don’t pass the lang. Get it from the select
here is a better version that redoes the search when you change the language
// 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>
Here is a simple solution.
Instead of using ybComplete as a callback use this function:
beforeYbComplete(data){
ybComplete(yb.id("lang").value, data)
}
And change this line in handleSearch:
// API link
tag.src = "https://" + lang + ".wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=beforeYbComplete&search=" + term;
I’m currently using the Wikipedia API to make a simple search with Wikipedia, I have a <select> dropdown and a simple input with an autocomplete.
What I’m trying to do is to be able to search in different languages, the auto-complete works fine with languages but when I’m trying to search by clicking on one of my auto-complete links it returns “undefined”. (e.g. undefined.wikipedia.org instead of en.wikipedia.org)
Here’s what I tried so far:
// 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>
In the API link there is a parameter “callback” which calls my function (ybComplete()), how can I tell the link to be able to change the language based on the lang variable?
@MichaelBurns I rewrote to handle a change of language while still text in the input field
