The JavaScript Autocomplete feature fails to clear suggestions when there is no user input detected

Question

The JavaScript Autocomplete feature fails to clear suggestions when there is no user input detected

After watching a tutorial on using Javascript with Autocomplete and a JSON file, I implemented the code successfully. However, I encountered an issue:

When I clear the input field, all results from the file are displayed. I've tried adding code to clear the results, but it doesn't seem to work as intended.

The demo on JSFiddle isn't functioning properly for me due to restrictions on adding assets. Here's the section of the code that should be handling the clearing of data when the input box is empty:

if (matches.length === 0) {
matchList.innerHTML = ''; // Line 31: The results aren't cleared when the input is empty.

}

In the CSS field, I included some hardcoded data from the JSON file for your reference.

Appreciate any help, Matthttps://i.stack.imgur.com/f8FiS.jpg

javascript json autocomplete

Answer 1

Answer №1

By utilizing the onChange() method, you have the ability to monitor the total length of the keyword inputted into the input field. If the input is NULL, you can simply disregard any suggestions.

Answer 2

By utilizing the onChange() method, you have the ability to monitor the total length of the keyword inputted into the input field. If the input is NULL, you can simply disregard any suggestions.

Answer 3

Answer №2

After experimenting with the code and conducting thorough research, I found that splitting the code into two separate events was necessary. One crucial event that was missing was triggering the code when the DOM is loaded to retrieve a list of states. Below is the updated code:

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');
let states;

// Retrieve states
const getStates = async () => {
  const res = await fetch('states.json');
  states = await res.json();
};

// Filter states based on search input
const searchStates = (searchText) => {
  // Find matches for current text input
  let matches = states.filter((state) => {
    const regex = new RegExp(`^${searchText}`, 'gi');
    return state.name.match(regex) || state.abbr.match(regex);
  });

  // Clear content if input or matches are empty
  if (searchText.length === 0) {
    matches = [];
    matchList.innerHTML = '';
  }

  displayResults(matches);
};

// Display results in HTML
const displayResults = (matches) => {
  if (matches.length > 0) {
    const html = matches
      .map(
        (matt) => `<div class="card card-body mb-1">
    <h4>${matt.name} (${matt.abbr}) 
    <span class="text-primary">${matt.capital}</span></h4>
    <small>Lat: ${matt.lat} / Long: ${matt.long}</small>
   </div>`
      )
      .join('');
    matchList.innerHTML = html;
  }
};

window.addEventListener('DOMContentLoaded', getStates);
search.addEventListener('input', () => searchStates(search.value));

Answer 4

After experimenting with the code and conducting thorough research, I found that splitting the code into two separate events was necessary. One crucial event that was missing was triggering the code when the DOM is loaded to retrieve a list of states. Below is the updated code:

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');
let states;

// Retrieve states
const getStates = async () => {
  const res = await fetch('states.json');
  states = await res.json();
};

// Filter states based on search input
const searchStates = (searchText) => {
  // Find matches for current text input
  let matches = states.filter((state) => {
    const regex = new RegExp(`^${searchText}`, 'gi');
    return state.name.match(regex) || state.abbr.match(regex);
  });

  // Clear content if input or matches are empty
  if (searchText.length === 0) {
    matches = [];
    matchList.innerHTML = '';
  }

  displayResults(matches);
};

// Display results in HTML
const displayResults = (matches) => {
  if (matches.length > 0) {
    const html = matches
      .map(
        (matt) => `<div class="card card-body mb-1">
    <h4>${matt.name} (${matt.abbr}) 
    <span class="text-primary">${matt.capital}</span></h4>
    <small>Lat: ${matt.lat} / Long: ${matt.long}</small>
   </div>`
      )
      .join('');
    matchList.innerHTML = html;
  }
};

window.addEventListener('DOMContentLoaded', getStates);
search.addEventListener('input', () => searchStates(search.value));

The JavaScript Autocomplete feature fails to clear suggestions when there is no user input detected

Answer №1

Answer №2

Similar questions

Is the callback of $.post not being executed until the loop it's contained in finishes?

The server is unable to receive lists that are included within the JSON object being passed in

Tips for sending an optional parameter to @Directives in Angular 2 using TypeScript

Tips for including parameters in the existing URL using AngularJS

Transforming a Pandas DataFrame into a specialized nested JSON structure

There seems to be a malfunction in the PHP controller causing issues with the functionality

Utilizing Google Maps API to automatically set an address on page load

Exploring JSON objects in React for improved search functionality

Tips for declaring the OpenLayers map object globally

React app experiencing inconsistent loading of Google Translate script

Validation of 'e' Symbol in Input Type Number Using jQuery Validator

The JSON response is invalid due to a syntax error

Is there a way to ensure that the table headers are printed on every page when using Google Chrome

React-Redux - Implement a button toggle functionality to display or hide additional information

What is the best way to use `JSON.parse` in jQuery to accommodate older browsers?

The null error occurs when rendering with React's state array

What is the significance of providing a sole argument to the Object () function?

Error encountered in App.js on line 29: Unable to access the property 'map' as it is undefined

Guide to activating the isActive status on a live link within a map iteration utilizing the NEXTUI navigation bar

Cordova Geolocation now displaying incorrect latitude and longitude values as NAN