JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>
Suggestions while searching search bar, using html css and javascipt
</h1>
  <div class="search-bar">
  <input type="text" id="searchInput" placeholder="Type something...">
<ul id="suggestions"></ul>

  </div>
</body>
</html>

CSS

.search-bar input {
  flex-grow: 1;
  padding: 5px;
}

.search-bar button {
  background-color: #FF9900;
  color: black;
  border: none;
  padding: 8px 8px;
  margin-right: 5px;
  border-radius: 3px;
  cursor: pointer;
}

#suggestions {
  list-style: none;
  padding: 0;
}

.suggestion {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

JavaScript

const searchInput = document.getElementById('searchInput');
const suggestionsContainer = document.getElementById('suggestions');

const dummyData = [
  'Apple',
  'Banana',
  'Cherry',
  'Date',
  'Grape',
  'Lemon',
  'Mango',
  'Orange',
  'Peach',
  'Pear'
];

searchInput.addEventListener('input', () => {
  const inputValue = searchInput.value.toLowerCase();
  const suggestions = dummyData.filter(item => item.toLowerCase().includes(inputValue));
  displaySuggestions(suggestions);
});

function displaySuggestions(suggestions) {
  suggestionsContainer.innerHTML = '';
  suggestions.forEach(suggestion => {
    const li = document.createElement('li');
    li.className = 'suggestion';
    li.textContent = suggestion;
    li.addEventListener('click', () => {
      searchInput.value = suggestion;
      suggestionsContainer.innerHTML = '';
    });
    suggestionsContainer.appendChild(li);
  });
}