Utilize the arrow keys to navigate through the search suggestions

Question

Utilize the arrow keys to navigate through the search suggestions

I am facing an issue with my search bar where I am unable to navigate through the suggestions using arrow keys. I have been struggling with this problem for days and would appreciate any help in resolving it.

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() {
  inputTerm.... // The code is truncated for brevity, please see original source for full content.

.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: ....

<h1 class="title">AutoComplete Me</h1>
<input type="text" id="searchBox" class="search-field" autoFocus />
<ul id="searchResults" class="term-list hidden"></ul>

javascript jquery css html

Answer 1

Answer №1

There is a reference to li in this context:

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

However, at that point, there are no li elements added in the DOM yet. As a result, $('li') is returning zero elements.

Additionally, you are losing access to the li tags every time a search or keypress event occurs because you are removing the existing li elements from the DOM and adding new ones with each keypress following the search action.

Here,

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

Therefore, your original li variable is referencing outdated, removed li elements.

Solution:

To address this issue, you should update the li variable after adding new li elements within 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";
  }
};

Furthermore, your search function is triggered on every keyup event, including up and down arrow key presses; make sure to handle these specific keyboard interactions.

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

// Remaining content of the snippet...

Answer 2

There is a reference to li in this context:

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

However, at that point, there are no li elements added in the DOM yet. As a result, $('li') is returning zero elements.

Additionally, you are losing access to the li tags every time a search or keypress event occurs because you are removing the existing li elements from the DOM and adding new ones with each keypress following the search action.

Here,

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

Therefore, your original li variable is referencing outdated, removed li elements.

Solution:

To address this issue, you should update the li variable after adding new li elements within 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";
  }
};

Furthermore, your search function is triggered on every keyup event, including up and down arrow key presses; make sure to handle these specific keyboard interactions.

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

// Remaining content of the snippet...

Utilize the arrow keys to navigate through the search suggestions

Answer №1

Similar questions

Enhancing the performance of a node.js Falcor router connecting a traditional REST API data source with a Falcor client

I'm looking for help on creating a three-column table using javascript/jquery. The table should display Product, Price, and Discount (which is calculated at 20%). Can anyone

Formatting dates for the bootstrap datepicker

The dynamic fields are created by the combobox

What indicators should we look for to decide if JavaScriptExecutor is needed in a Selenium C# project?

Adding individual names for elements in a list using Jackson

Transforming the header to function similarly to the address bar in the Google Chrome mobile app

How to simultaneously play a sound and display an alert message using JavaScript

Implementing automatic redirection upon clicking using React without the need for manual clicking

What is the method for aligning a button label to the left and an icon to the right?

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

barchart rendered in SVG without the use of any external libraries

Error encountered while establishing connection with MongoClient

Using HTML to place an image tag close to an input element

Different ways to dynamically change tailwind colors during execution

Update the label on a webpage using Selenium's JavaScriptExecutor

Is there a way to order the execution of two functions that each produce promises?

In my Angular application, I have two div elements that I want to toggle between. When a button located in the first div is clicked, I need

Tips for combining values from two inputs to an angular ng-model in AngularJS

Vue/Vuex - using async dispatch for AJAX requests in multiple components