/    Sign up×
Community /Pin to ProfileBookmark

Page Freezing

Why does my page freeze on this?

<script>
var targetInput = document.getElementById(“aircraft”),
results = document.getElementById(“autocomplete-results”),
aircraftList = [‘aa’,’bb’,’cc’,’dd’,’ee’],
matches = [];

targetInput.focus();

targetInput.addEventListener(“keyup”, function(event){

results.innterHTML = ”;
toggleResults(“hide”);

if (this.value.length > 0){
matches = getMatches(this.value);
if (matches.length > 0){
displayMatches(matches);
}
}

});

function toggleResults(action){
if (action == ‘show’){
results.classList.add(‘visible’);
} else {
results.classList.remove(‘visible’);
}

}

function getMatches (inputText){
var matchList = [];
for(var i = 0; i < aircraftList.length; i++){
if (aircraftList[i].toLowerCase().indexOf(inputText.toLowerCase()) != -1){
matchList.push(aircraftList[i]);
}
}
return matchList;
}

function displayMatches(matchList){
var j = 0;
while (j < matchList.length){
results.innerHTML += ‘<li class=”result”>’ + matchList[j] + ‘</li>’;
}

toggleResults(“show”);
}

</script>

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@kiwisauthorDec 09.2018 — Here is my HTML

<div class=container">

<input type="type" id="aircraft" name="aircraft" placeholder="Search for aircraft">

<ul id="autocomplete-results">

<li>dd</li>

<li>dd</li>

<li>dd</li>

</ul>

</div>
Copy linkTweet thisAlerts:
@SempervivumDec 09.2018 — Obviously you forgot to increment your variable j in the function displayMatches:
function displayMatches(matchList) {
var j = 0;
while (j &lt; matchList.length) {
results.innerHTML += '&lt;li class="result"&gt;' + matchList[j] + '&lt;/li&gt;';
j++; // add this
}
toggleResults("show");
}

Why not simply use a for loop?
Copy linkTweet thisAlerts:
@kiwisauthorDec 09.2018 — Awesome thank you
Copy linkTweet thisAlerts:
@rootDec 09.2018 — you can even while ( matchList.length&gt;= j++) { and j = matchList.length;
while ( --j &gt;= 0 ) {

I would have used a for loop myself
function displayMatches(matchList) {
for( var j = 0; j &lt; matchList.length; j++)
results.innerHTML += '&lt;li class="result"&gt;' + matchList[j] + '&lt;/li&gt;';
toggleResults("show");
}

however, I have noticed that firefox can be funny from time to time, no idea why and it not like for loops that have no braces.
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...