We Keep Coding

How do i add links to items to the array of items to be searched

how to i add links to each items in my suggested item array, once i make a search i neeed it to take me to the page where those items are contained. i already coded the autocomplete search using vannila javascript
here is the javascript code
function autocomplete(inp, arr) {
var currentFocus;
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
a = document.createElement("p");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML ="<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length) ;
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
a.appendChild(b);
}
}
});
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) {
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
autocomplete(document.getElementById("myInput"), countries);
what i did here is that, when the value is been entered, it will concatenate with this and take me to the needed page, but i can not do it that way, i am thinking there could be another way
document.getElementById('searchform').onsubmit = function() {
window.location = 'http://www.skyyonliquor.com' + "/" + document.getElementById('myInput').value +"-section.html";
return false;
my suggestions array i need to add links to:
var countries = [
"Spirit","Whiskey","Rum","Vodka","Brandy & Cognac","Malibu","Tequila","Chateau Mouton Rothschild","Chateau Margaux","Baron Philippe de Rothschild Mouton Cadet","Dom perignon","Moet Imperial","Moet Nectar Imperial Rose","Veuve Clicquot Rose Demi Sec","Clase Azul","Barware","Vodka","Gin","Champagne","Hennessy V.S.O.P","Hennesy X.O","Martell Blue Swift","Martell VSOP","Johnnie Walker Blue Label","Jack Daniels Old No. 7","Jack Daniels Honey","Jameson Black Barrel","Black Velvet","Kavalan"];
can i get any help?

Just loop through your array and create an A HTML element with the address you want, and append it to the element you want it to be displayed in.
var countries = [
"Spirit","Whiskey","Rum","Vodka","Brandy & Cognac","Malibu","Tequila","Chateau Mouton Rothschild","Chateau Margaux","Baron Philippe de Rothschild Mouton Cadet","Dom perignon","Moet Imperial","Moet Nectar Imperial Rose","Veuve Clicquot Rose Demi Sec","Clase Azul","Barware","Vodka","Gin","Champagne","Hennessy V.S.O.P","Hennesy X.O","Martell Blue Swift","Martell VSOP","Johnnie Walker Blue Label","Jack Daniels Old No. 7","Jack Daniels Honey","Jameson Black Barrel","Black Velvet","Kavalan"];
const parent = document.getElementById("myElement");
for(let i = 0; i < countries.length; i++)
{
const a = document.createElement("a");
a.textContent = countries[i]; //displayed text
a.href = "http://example.com/mysearch?q=" + countries[i] + "&myquery=blah"; //link
//a.className = "myLink"; //style if needed
parent.appendChild(a);
}
#myElement > a.myLink
{
text-decoration: none;
margin-right: 1em;
}
<div id="myElement"></div>

How can I grab the whole word in the Javascript autofill

How can I modify the following code so when I click on the element grab the whole word
I have no idea from javascript and I need this feature
code it's from https://www.w3schools.com/howto/howto_js_autocomplete.asp
function autocomplete(inp, arr) {
var currentFocus;
inp.addEventListener("input", function (e) {
var a,
b,
i,
val = this.value;
closeAllLists();
if (!val) {
return false;
}
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list-invoice");
a.setAttribute("class", "autocomplete-items-invoice");
this.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.addEventListener("click", function (e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
a.appendChild(b);
}
}
});
inp.addEventListener("keydown", function (e) {
var x = document.getElementById(this.id + "autocomplete-list-invoice");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) {
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = x.length - 1;
x[currentFocus].classList.add("autocomplete-active-invoice");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active-invoice");
}
}
function closeAllLists(elmnt) {
var x = document.getElementsByClassName("autocomplete-items-invoice");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
autocomplete(document.getElementById("myInput_invoice"), promList);
with the following let's say I type 'ma' and I click on Maura then
var user_input = document.getElementById("myInput_invoice").value;
get the value 'ma' but I want to grab Maura

jQuery simulate one input event to another input

I have two text input id: input1 and input2. I would like to simulate keypress on input1 to input2. I cannot copy values onblur because after simulation I shall change the value of input1. Could you please let me know how to do this in jQuery 1.6 or Javascript? I tried below, but this isn't working and changing the value i.e. $('#'+origid).val() returns blank.
$(".maskedinput").keyup(function (e) {
var value = $.trim($(this).val());
var origid = $(this).attr('origid');
var originalelemevt = jQuery.Event( "keypress" );
originalelemevt.which = e.which;
originalelemevt.keycode = e.keycode;
$('#'+origid).trigger( originalelemevt );
var newval = '';
if(value.length >=4){
var orignal = value.substring(0,value.length-4);
for(var i=0;i<orignal.length;i++)
newval +='*';
newval +=value.substring(orignal.length);
$(this).val(newval);
}
});
$(document).ready(function() {
$("#I1").keyup(function (e) {
var value = $.trim($(this).val());
var newval = '';
if(value.length >=4){
var orignal = value.substring(0,value.length-4);
for(var i=0;i<orignal.length;i++)
newval +='*';
newval +=value.substring(orignal.length);
$(this).val(newval);
}
$('#I2').val(e.target.value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<form id='F1'>
<input id='I1'>
<input id='I2'>
</form>

This what I was looking for, keypress event on id1.
$("#id1").keypress(function(e) {
var inputkey = e.which || e.keyCode;
var result = getInputSelection(document.getElementById("id1"));
$("#id2").trigger("keypress")
.val(function(i, val) {
var key = e.which || e.keyCode;
// return this.value + String.fromCharCode(key);
return this.value.substr(0, result.start) + String.fromCharCode(key) + this.value.substr(result.end)
});
});
$("#id1").keyup(function(e) {
mask('id1');
});
$("#id1").keydown(function(e) {
var inputkey = e.which || e.keyCode;
//alert(inputkey);
if (inputkey == 8) {
e.preventDefault();
var new_val = replaceValue(inputkey);
//alert(new_val);
$("#id1").val(new_val);
$("#id2").val(new_val);
// mask('id1');
} else if (inputkey == 46) {
e.preventDefault();
var new_val = replaceValue(inputkey);
//alert(new_val);
$("#id1").val(new_val);
$("#id2").val(new_val);
// mask('id1');
}
});
function mask(elid) {
var $this = $('#' + elid);
$this.val($this.val().replace(/.(?=.{4})/g, '*'));
}
function replaceValue(inputkey) {
var result = getInputSelection(document.getElementById("id1"));
// alert("Backspace "+result.start +","+result.end);
var new_val = $("#id1").val();
if (result.start == result.end) {
if (inputkey == 8) {
new_val = $("#id2").val().substr(0, result.start - 1) + $("#id2").val().substr(result.end);
} else if (inputkey == 46) {
new_val = $("#id2").val().substr(0, result.start) + $("#id2").val().substr(result.end + 1);
}
} else {
new_val = $("#id2").val().substr(0, result.start) + $("#id2").val().substr(result.end);
}
return new_val;
}
function getInputSelection(el) {
var start = 0,
end = 0,
normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
// Create a working TextRange that lives only in the input
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
// Check if the start and end of the selection are at the very end
// of the input, since moveStart/moveEnd doesn't return what we want
// in those cases
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
}
return {
start: start,
end: end
};
}
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="banner-message">
SSN:
<input type="text" id="id1" />
<input type="text" id="id2" style="display:none" />
</div>

How to type text in front of a variable

I will try to explain this the best way I can. I am making a domain checker and that works for me, now I have a function that shows some of the domains I have in my var named "domains" once I type in a DOT 'because all the variables domains begin with a dot' all the domains will appear but when I write some text before I put the DOT it will not appear anymore. What do I have to change to let it show the text before the DOT? Here is the code I use, and some picture how it looks right now.
<body>
<center>
<h2>Autocomplete domein</h2>
<p>Start typing:</p>
<form autocomplete="off" action="#">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Domain">
</div>
<input type="submit">
</form>
</center>
<script>
function autocomplete(inp, arr) {
var currentFocus;
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
a.appendChild(b);
}
}
});
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) {
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (var i = 1; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
var domain = [".nl",".com",".net",".org",".network",".at",".co",".co.uk"
,".be",".bl",".us",".eu",".uk", ".lu"];
autocomplete(document.getElementById("myInput"), domain);
</script>
</body>

Try
<body>
<center>
<h2>Autocomplete domein</h2>
<p>Start typing:</p>
<form autocomplete="off" action="#">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Domain">
</div>
<input type="submit">
</form>
</center>
<script>
function autocomplete(inp, arr) {
var currentFocus;
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
var name ='';
if(this.value.indexOf('.')>=0){
val =this.value.slice(this.value.indexOf('.'));
name = this.value.slice(0,this.value.indexOf('.'));
}
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = name;
b.innerHTML += "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
b.innerHTML += "<input type='hidden' value='" + name + arr[i] + "'>";
b.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
a.appendChild(b);
}
}
});
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) {
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (var i = 1; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
var domain = [".nl",".com",".net",".org",".network",".at",".co",".co.uk"
,".be",".bl",".us",".eu",".uk", ".lu"];
autocomplete(document.getElementById("myInput"), domain);
</script>
</body>

Selecting an autocomplete input value goes to a link

I would like my website to load a new page depending on what a user selects from an autocomplete field. For example, if you select 'School of Arts' a page with information on the school loads, but a different page loads if you select 'School of History'.
So far I have the autocomplete working and written a function to go to a different page depending on what option you select, but it doesn't actually go to the page yet.
There aren't any errors in the console, so I'm not sure how to locate which part of my code is wrong.
Thanks
function autocomplete(inp, arr) {
var currentFocus;
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
a.appendChild(b);
}
}
});
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) { //up
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function button(text) {
var string = "";
document.getElementById("tags").value = 'Go to your Department';
text = text.toLowerCase();
switch(text){
case 'kent school of architecture':
string = 'architecture';
break;
case 'school of arts':
string = 'arts';
break;
case 'school of english':
string = 'english';
break;
case 'school of european culture and languages':
string = 'ecl';
break;
case 'school of history':
string = 'hist';
break;
case 'school of music and fine art':
string = 'mfa';
break;
default:
string = '';
}
if (string != ''){
window.location.href = "https://"+ string;
}
else{
window.location.reload();
}
};
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
var schools = [ "Kent School of Architecture","School of Arts","School of English","School of European Culture and Languages", "School of History", "School of Music and Fine Art"];
autocomplete(document.getElementById("tags"), schools);
$(document).ready(function() {
$('#tagsautocomplete-list').click( function() {
var text = document.getElementById("tags").value
document.getElementById("tags").value = 'Go to your Department';
button(text);
})
});
My html:
<div class="input-group">
<input name="tags" id="tags" autocomplete="on" class="form-control ui-autocomplete-input form-control-md" type="text" placeholder="Enter your school name...">
<div id="tagsautocomplete-list" class="autocomplete-items"><div><strong>School of Art</strong>s<input type="hidden" value="School of Arts"></div></div>
</div>
Thanks!

Here is how I did it:
function button(text) {
var string = "";
document.getElementById("tags").value = 'Go to your Department';
text = text.toLowerCase();
switch(text){
case 'kent school of architecture':
string = 'architecture';
break;
case 'school of arts':
string = 'arts';
break;
case 'school of english':
string = 'english';
break;
case 'school of european culture and languages':
string = 'ecl';
break;
case 'school of history':
string = 'hist';
break;
case 'school of music and fine art':
string = 'mfa';
break;
default:
string = '';
}
if (string != ''){
window.location.href = "https://kentunion.co.uk/"+ string;
}
else{
window.location.reload();
}
};
function autocomplete(inp, arr) {
var currentFocus;
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
button(inp.value);
});
a.appendChild(b);
}
}
});
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) { //up
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
var schools = [ "Kent School of Architecture","School of Arts","School of English","School of European Culture and Languages", "School of History", "School of Music and Fine Art"];
autocomplete(document.getElementById("tags"), schools);
You had a syntax error in except the one passed as an argument:*/. The comment was not opened properly.
I removed the .click because it is no longer necessary (see below).
Your .button() function was defined inside your .autocomplete() function, so the .click() could not call it.
I moved the .button() function outside the autocomplete() function in case you want to use it, though my solution should still work even if you leave it where it is.
Finally, I changed the code to call .button() inside b.addEventListener("click", function(e) because that will cause the redirect right after the tags field get populated.
Side note: as WillardSolutions mentioned, please don't use string as a variable name ;).