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

Guide to creating a reminder feature in NestJS

Transform Json data from JavaScript format to a format that PHP can understand

Error: Unable to modify the value of a protected property '0' in the object 'Array'

Building Unique Staircases with Three.js Geometry

JavaScript: unable to locate information within JSON reply

The placeholder feature seems to be malfunctioning when it comes to entering phone numbers in a react

Troubleshooting problem with MongoDB queries within a for loop

Error encountered: "Localhost at VScode is refusing port 8080 for Cold

Which HTTP headers pertain to the loading of iframes? nuxt-helmet

Is there a way to have one element automatically expand when another is selected?

Whenever I attempt to retrieve a div, I encounter an uncaught type error, specifically stating that it cannot read the property length of

When selecting an option from jQuery autocomplete, the suggestions data may not always be returned

Encountering a Jquery 404 error while attempting to locate a PHP file through Ajax requests

Unable to Trigger onClick Event with react-bootstrap Navbar Dropdown in Combination with react-router-dom

Discover the process of incorporating secondary links into your dabeng organizational chart!

How can I load a function from the HTML file that is being loaded using .load() in jQuery?

Harnessing the power of the bluebird promise library

Using the spread syntax to eliminate a property from an object within a ReactJs element

The challenge of handling scopes in Angular-seed

Numerous operations included in a JavaScript document