Busquedes d’Auto-compleció

Publicat el per

“suggeriments automàtics” o “auto-compleció”. Aquest mètode es pot implementar en cercadors de diccionaris i altres aplicacions web per a oferir suggeriments mentre l’usuari escriu.

Per crear aquest efecte, pots utilitzar JavaScript amb una base de dades que contingui les paraules i les seves definicions. Aquí tens un exemple bàsic utilitzant JavaScript i HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Auto-compleció</title>
  <style>
    .suggestions {
      border: 1px solid #ccc;
      max-height: 150px;
      overflow-y: auto;
      position: absolute;
      background-color: white;
    }
    .suggestion-item {
      padding: 10px;
      cursor: pointer;
    }
    .suggestion-item:hover {
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <input type="text" id="search" placeholder="Escriu per cercar..." oninput="showSuggestions(this.value)">
  <div id="suggestions" class="suggestions"></div>

  <script>
    const dictionary = ['calamar', 'calamarsa', 'calamarsada', 'calamarsejar', 'calamar', 'calamars'] // Afegeix més paraules aquí
    
    function showSuggestions(query) {
      const suggestionsContainer = document.getElementById('suggestions');
      suggestionsContainer.innerHTML = ''; // Neteja les suggeriments anteriors
      if (query.length > 0) {
        const filteredWords = dictionary.filter(word => word.startsWith(query));
        filteredWords.forEach(word => {
          const suggestionItem = document.createElement('div');
          suggestionItem.textContent = word;
          suggestionItem.className = 'suggestion-item';
          suggestionItem.onclick = () => selectSuggestion(word);
          suggestionsContainer.appendChild(suggestionItem);
        });
      }
    }

    function selectSuggestion(word) {
      const searchInput = document.getElementById('search');
      searchInput.value = word;
      document.getElementById('suggestions').innerHTML = ''; // Neteja les suggeriments després de seleccionar una
    }
  </script>
</body>
</html>