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 ;).
Related
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>
I'm intending to build an autocomplete search box that searches through suggest_data which approximately consists of 12,000+ data. The jquery takes value from search box, searches though the data array and stores the suggestion values in array which will be further used to populate the suggestion.
<input type="text" id="Search_box" placeholder="Search Data">
$('#Search_box').on('input', function () {
suggester(document.getElementById("Search_box"));
});
The following function takes input value from search box and searches through search_array which has 12,000+ records and gives a list of data that have those characters in it as a suggestion.
function suggester(searchElement) {
var init;
searchElement.addEventListener("input", function(e) {
var x, y, i, val = this.value;
closeAllLists();
if (!val) { return false;}
init = -1;
var search_value = $('#Search_box').val();
suggest_data = [];
re = new RegExp("\\b\\w*" + search_value + "\\w*\\b", "ig");
for (i = 0; i < search_array.length; i++) {
if(search_array[i].match(re))
suggest_data = suggest_data.concat(search_array[i].match(re));
}
x = document.createElement("DIV");
x.setAttribute("id", this.id + "autocomplete-list");
x.setAttribute("class", "autocomplete-items");
x.setAttribute("onClick", "this.setSelectionRange(0, this.value.length)");
this.parentNode.appendChild(x);
for (i = 0; i < suggest_data.length; i++) {
y = document.createElement("DIV");
val = truncate(suggest_data[i],30);
reg = new RegExp(search_value, "ig");
n = val.search(reg);
res = suggest_data[i].substr(n,search_value.length);
val = val.replace(res, '<span class="text_highlighter">'+res+'</span>');
y.innerHTML = val;
y.innerHTML += "<input type='hidden' value='" + suggest_data[i] + "'>";
y.addEventListener("click", function(e) {
searchElement.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
$('#Search_box').focus();
});
x.appendChild(y);
$('#Search_box').focus();
}
});
searchElement.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
init++;
addActive(x);
} else if (e.keyCode == 38) { //up
init--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (init > -1) {
if (x) x[init].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (init >= x.length) init = 0;
if (init < 0) init = (x.length - 1);
x[init].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 != searchElement) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
But this approach is slowing down when backspace is clicked. The addEventListener function is triggered multiple times hence it is looping inside the suggested function inorder to give result. Example if ASD is entered and if backspace is typed further on then it starts slowing down while giving result. What should be done inorder to speed up search?
On every keydown your eventListener is triggering your autocomplete function. When someone clicks backspace, you're getting a heap of keydown's at the same time, and right now, that means you're running the function a number of times at the same time. This is what's slowing everything down.
For example, if I were to type, "Hello my name is" and then delete the
entire string, I'd have triggered your search 16 times, searching
12,000 x 16 records! You can start to see why this would become an issue.
A debounce function gets around this issue quite easily as it sets a delay between running again. Ie. if someone has just erased the entire string, it may just trigger once.
This is a great example of a debounce function:
// http://davidwalsh.name/javascript-debounce-function
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) { func.apply(context, args); }
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) { func.apply(context, args); }
};
}
And this is how you would implement it on your code for autocomplete:
searchElement.addEventListener("keydown", debounce(function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
init++;
addActive(x);
} else if (e.keyCode == 38) { //up
init--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (init > -1) {
if (x) x[init].click();
}
}
}, 500)); // Time set here as callback for how often it should be run, change this to whatever you want the time delay to be.
Currently I am working to make an autocomplete search bar for ghost cms and I have to use handlebars for it. I have done it using html, which is wrong; so what can I do to implement a handlebars template?
This is the html part:
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Search">
</div>
Javascript part is:
<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 = 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 countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","];
autocomplete(document.getElementById("myInput"), countries);
</script>
So, my problem is that I am doing this in a .hbs file. I don't know how to use handlebars for the search functionality.
If I try to create a
{{#each}}
{{somedata}}
{{/each}}
It doesn't work. How should I link my handlebars part with my javascript part? I have seen people doing it with jquery but it just went over my head.
So can anyone help please?
PS: If you are unable to understand I can also share more details.
Handlebar files are rendered by the node/express server. Are you using proper route handlers which also render the hbs file before sending the result?
wrt Ghost CMS, is this hbs file going to be a partial or an entirely new page?
If it is a partial, is the file being rendered properly? (you can use inspect element after the page as rendered to check it)
If it is an entirely new page, are the routes properly configured in the routes.yaml file?
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
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>