CODEWITHSUNDEEP
javascriptjquerycsshtml
Opeyemi Odedeyi
Opeyemi Odedeyi

Reputation: 770

need to use arrow keys to move through search suggestions

i got a search bar with good suggestions and i need to be able to use the arrow keys to move through the options, but it doesn't work and i am really confused, please can you help me out, i have been battling with this stuff for days now.

var searchIndex = ["404 Error", "Address Bar", "Ajax", "Apache", "Autoresponder", "BitTorrent", "Blog", "Bookmark", "Bot", "Broadband", "Captcha", "Certificate", "Client", "Cloud", "Cloud Computing", "CMS", "Cookie", "CSS", "Cyberspace", "Denial of Service", "DHCP", "Dial-up", "DNS Record", "Domain Name", "Download", "E-mail", "Facebook", "FiOS", "Firewall", "FTP", "Gateway", "Google", "Google Drive", "Gopher", "Hashtag", "Hit", "Home Page", "HTML", "HTTP", "HTTPS", "Hyperlink", "Hypertext", "ICANN", "Inbox", "Internet", "InterNIC", "IP", "IP Address", "IPv4", "IPv6", "IRC", "iSCSI", "ISDN", "ISP", "JavaScript", "jQuery", "Meta Search Engine", "Meta Tag", "Minisite", "Mirror", "Name Server", "Packet", "Page View", "Payload", "Phishing", "POP3", "Protocol", "Scraping", "Search Engine", "Social Networking", "Socket", "Spam", "Spider", "Spoofing", "SSH", "SSL", "Static Website", "Twitter", "XHTML"];

var input = document.getElementById("searchBox"),
  ul = document.getElementById("searchResults"),
  inputTerms, termsArray, prefix, terms, results, sortedResults;


var search = function() {
  inputTerms = input.value.toLowerCase();
  results = [];
  termsArray = inputTerms.split(' ');
  prefix = termsArray.length === 1 ? '' : termsArray.slice(0, -1).join(' ') + ' ';
  terms = termsArray[termsArray.length - 1].toLowerCase();

  for (var i = 0; i < searchIndex.length; i++) {
    var a = searchIndex[i].toLowerCase(),
      t = a.indexOf(terms);

    if (t > -1) {
      results.push(a);
    }
  }

  evaluateResults();
};

var evaluateResults = function() {
  if (results.length > 0 && inputTerms.length > 0 && terms.length !== 0) {
    sortedResults = results.sort(sortResults);
    appendResults();
  } else if (inputTerms.length > 0 && terms.length !== 0) {
    ul.innerHTML = '<li>Whoah! <strong>' +
      inputTerms +
      '</strong> is not in the index. <br><small><a href="http://google.com/search?q=' +
      encodeURIComponent(inputTerms) + '">Try Google?</a></small></li>';

  } else if (inputTerms.length !== 0 && terms.length === 0) {
    return;
  } else {
    clearResults();
  }
};

var sortResults = function(a, b) {
  if (a.indexOf(terms) < b.indexOf(terms)) return -1;
  if (a.indexOf(terms) > b.indexOf(terms)) return 1;
  return 0;
}

var appendResults = function() {
  clearResults();

  for (var i = 0; i < sortedResults.length && i < 5; i++) {
    var li = document.createElement("li"),
      result = prefix +
      sortedResults[i].toLowerCase().replace(terms, '<strong>'+ terms + '</strong>');

    li.innerHTML = result;

    ul.appendChild(li);
  }
  $('li').click(function(e) {
    $('input').val($(this).text());
  });
  if (ul.className !== "term-list") {
    ul.className = "term-list";
  }
};

var clearResults = function() {
  ul.className = "term-list hidden";
  ul.innerHTML = '';
};

input.addEventListener("keyup", search, false);





var li = $('li');
var liSelected;
$(window).keydown(function(e) {
  if (e.which === 40) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.next();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.eq(0).addClass('selected');
      }
    } else {
      liSelected = li.eq(0).addClass('selected');
    }
  } else if (e.which === 38) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.prev();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.last().addClass('selected');
      }
    } else {
      liSelected = li.last().addClass('selected');
    }
  }
});
.search-field,
.term-list {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

body {
  text-align: center;
  background: #f2f2f2;
}

.title {
  width: 100%;
  margin: 3em 0 1em;
  text-align: center;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-size: 170%;
  font-weight: 400;
  color: #2a5ba3;
  text-shadow: #fff 1px 1px 0px, #ddd 2px 2px, #ddd 3px 3px 1px;
}

.search-field {
  display: block;
  width: 30%;
  margin: 1em auto 0;
  padding: 0.5em 10px;
  border: 1px solid #999;
  font-size: 130%;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-weight: 400;
  color: #3e8ce0;
}

.term-list {
  list-style: none inside;
  width: 30%;
  margin: 0 auto 2em;
  padding: 5px 10px 0;
  text-align: left;
  color: #777;
  background: #fff;
  border: 1px solid #ddd;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-weight: 400;
}

.term-list li {
  padding: 0.5em 0;
  border-bottom: 1px solid #eee;
}

li.selected {
  background: yellow
}

.term-list strong {
  color: #444;
  font-weight: 700;
}

.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="title">AutoComplete Me</h1>
<input type="text" id="searchBox" class="search-field" autoFocus />
<ul id="searchResults" class="term-list hidden"></ul>

Upvotes: 4

Views: 4771

Answers (1)

Nadir Laskar
Nadir Laskar

Reputation: 4150

The only place your are getting reference to li is here 

var li = $('li');
var liSelected;
$(window).keydown(function(e) { ...

but at that time there are no li added in dom, hence $('li') is returning zero elements.

Further,

You are losing your reference to li tags on every search / keypress as you are removing the li from the dom and adding new li's on every keypress after search.

Here,

var clearResults = function() {
 debugger;
  ul.className = "term-list hidden";
  ul.innerHTML = ''; // Removing all li inside the ul
}

Thus, your old li variable is referencing old stale li's which are now removed.

Solution:

You need to update the li variable after adding new li inside the appendResults function.

var appendResults = function() {
  clearResults();
  for (var i = 0; i < sortedResults.length && i < 5; i++) {
    var _li = document.createElement("li"),
      result = prefix +
      sortedResults[i].toLowerCase().replace(terms, '<strong>'+ terms + '</strong>');

    _li.innerHTML = result;

    ul.appendChild(_li);
  }

  li = $('li');
  liSelected = li.filter('.selected');
  $('li').click(function(e) {
    $('input').val($(this).text());
  });
  if (ul.className !== "term-list") {
    ul.className = "term-list";
  }
};

Also your search function is getting called every keyup also for down and up keys you have to check for up and down key and return.

var search = function(e) {
  if(e.which==40||e.which==38) return;
  debugger;
  inputTerms = input.value.toLowerCase();
  results = [];
  termsArray = inputTerms.split(' ');
  prefix = termsArray.length === 1 ? '' : termsArray.slice(0, -1).join(' ') + ' ';
  terms = termsArray[termsArray.length - 1].toLowerCase();

  for (var i = 0; i < searchIndex.length; i++) {
    var a = searchIndex[i].toLowerCase(),
      t = a.indexOf(terms);

    if (t > -1) {
      results.push(a);
    }
  }

  evaluateResults();
};

SNIPPET

var searchIndex = ["404 Error", "Address Bar", "Ajax", "Apache", "Autoresponder", "BitTorrent", "Blog", "Bookmark", "Bot", "Broadband", "Captcha", "Certificate", "Client", "Cloud", "Cloud Computing", "CMS", "Cookie", "CSS", "Cyberspace", "Denial of Service", "DHCP", "Dial-up", "DNS Record", "Domain Name", "Download", "E-mail", "Facebook", "FiOS", "Firewall", "FTP", "Gateway", "Google", "Google Drive", "Gopher", "Hashtag", "Hit", "Home Page", "HTML", "HTTP", "HTTPS", "Hyperlink", "Hypertext", "ICANN", "Inbox", "Internet", "InterNIC", "IP", "IP Address", "IPv4", "IPv6", "IRC", "iSCSI", "ISDN", "ISP", "JavaScript", "jQuery", "Meta Search Engine", "Meta Tag", "Minisite", "Mirror", "Name Server", "Packet", "Page View", "Payload", "Phishing", "POP3", "Protocol", "Scraping", "Search Engine", "Social Networking", "Socket", "Spam", "Spider", "Spoofing", "SSH", "SSL", "Static Website", "Twitter", "XHTML"];

var input = document.getElementById("searchBox"),
  ul = document.getElementById("searchResults"),
  inputTerms, termsArray, prefix, terms, results, sortedResults;


var search = function(e) {
  if(e.which==40||e.which==38) return;
  inputTerms = input.value.toLowerCase();
  results = [];
  termsArray = inputTerms.split(' ');
  prefix = termsArray.length === 1 ? '' : termsArray.slice(0, -1).join(' ') + ' ';
  terms = termsArray[termsArray.length - 1].toLowerCase();

  for (var i = 0; i < searchIndex.length; i++) {
    var a = searchIndex[i].toLowerCase(),
      t = a.indexOf(terms);

    if (t > -1) {
      results.push(a);
    }
  }

  evaluateResults();
};

var evaluateResults = function() {
  if (results.length > 0 && inputTerms.length > 0 && terms.length !== 0) {
    sortedResults = results.sort(sortResults);
    appendResults();
  } else if (inputTerms.length > 0 && terms.length !== 0) {
    ul.innerHTML = '<li>Whoah! <strong>' +
      inputTerms +
      '</strong> is not in the index. <br><small><a href="http://google.com/search?q=' +
      encodeURIComponent(inputTerms) + '">Try Google?</a></small></li>';

  } else if (inputTerms.length !== 0 && terms.length === 0) {
    return;
  } else {
    clearResults();
  }
};

var sortResults = function(a, b) {
  if (a.indexOf(terms) < b.indexOf(terms)) return -1;
  if (a.indexOf(terms) > b.indexOf(terms)) return 1;
  return 0;
}

var appendResults = function() {
  clearResults();
 debugger;
  for (var i = 0; i < sortedResults.length && i < 5; i++) {
    var _li = document.createElement("li"),
      result = prefix +
      sortedResults[i].toLowerCase().replace(terms, '<strong>'+ terms + '</strong>');

    _li.innerHTML = result;

    ul.appendChild(_li);
  }
  
  li = $('li');  // Update here
  liSelected = li.filter('.selected'); // Update here
  
  $('li').click(function(e) {
    $('input').val($(this).text());
  });
  if (ul.className !== "term-list") {
    ul.className = "term-list";
  }
};

var clearResults = function() {
  ul.className = "term-list hidden";
  ul.innerHTML = '';
};

input.addEventListener("keyup", search, false);





var li = $('li');
var liSelected;
$(window).keydown(function(e) {
  if (e.which === 40) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.next();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.eq(0).addClass('selected');
      }
    } else {
      liSelected = li.eq(0).addClass('selected');
    }
    liSelected.trigger('click');
  } else if (e.which === 38) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.prev();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.last().addClass('selected');
      }
    } else {
      liSelected = li.last().addClass('selected');
    }
    liSelected.trigger('click');
  }
  
});
.search-field,
.term-list {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

body {
  text-align: center;
  background: #f2f2f2;
}

.title {
  width: 100%;
  margin: 3em 0 1em;
  text-align: center;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-size: 170%;
  font-weight: 400;
  color: #2a5ba3;
  text-shadow: #fff 1px 1px 0px, #ddd 2px 2px, #ddd 3px 3px 1px;
}

.search-field {
  display: block;
  width: 30%;
  margin: 1em auto 0;
  padding: 0.5em 10px;
  border: 1px solid #999;
  font-size: 130%;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-weight: 400;
  color: #3e8ce0;
}

.term-list {
  list-style: none inside;
  width: 30%;
  margin: 0 auto 2em;
  padding: 5px 10px 0;
  text-align: left;
  color: #777;
  background: #fff;
  border: 1px solid #ddd;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-weight: 400;
}

.term-list li {
  padding: 0.5em 0;
  border-bottom: 1px solid #eee;
}

li.selected {
  background: yellow
}

.term-list strong {
  color: #444;
  font-weight: 700;
}

.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="title">AutoComplete Me</h1>
<input type="text" id="searchBox" class="search-field" autoFocus />
<ul id="searchResults" class="term-list hidden"></ul>

Upvotes: 5

Related Questions