Comment remplir automatiquement un champ de texte lorsque vous appuyez sur une touche

Question

J'ai donc une exigence pour laquelle je dois taper quelque chose, puis à mi-chemin, cela devrait remplir automatiquement le reste des choses.

Exemple

J'ai un champ de texte, où je commence à taper « col », puis après je presse l'espace le champ de texte doit me montrer « colonne », auto pour le système de correction automatique.

Aussi, je me demandais si cela pourrait être implémenté comme un tableau ou une colonne de données provenant de ma base de données?

J'ai créé quelque chose comme ceci, mais cela modifie les valeurs d'un champ innerHTML. J'ai besoin de cela pour le champ de texte lui-même.

function handle(e) { 
 
    if (e.keyCode === 32) { 
 
     e.preventDefault(); 
 
     document.getElementById("p1").innerHTML = "Column"; 
 
    } 
 
}

<p id="p1">Hello World!</p> 
 
<form action="#"> 
 
    <input type="text" name="txt" onkeypress="handle(event)" /> 
 
</form>

Je suis nouveau à cette sorte que toute aide serait très apprécié

Answer 1

Chargez vos valeurs de votre base de données dans un JSON et utiliser la propriété e.target qui contiendra l'élément HTML où le event a eu lieu.

Essayez le code suivant:

// load your values from DB here 
 
var dictionary = { 
 
    'col': 'Column', 
 
    'ro': 'Row', 
 
    'tab': 'Table' 
 
}; 
 

 
function handle(e) { 
 
    if (e.keyCode === 32) { 
 
    e.preventDefault(); 
 

 
    for (val in dictionary) { 
 
     if (e.target.value == val) { 
 
     e.target.value = dictionary[val]; 
 
     continue; 
 
     } 
 
    } 
 
    } 
 
}

<p id="p1">Hello World!</p> 
 
<form action="#"> 
 
    <input type="text" name="txt" onkeypress="handle(event)" /> 
 
</form>

Answer 2

Essayez jquery Auto suggèrent: Visitez HERE

$(function() { 
 
    var availableTags = [ 
 
     "ActionScript", 
 
     "AppleScript", 
 
     "Asp", 
 
     "BASIC", 
 
     "C", 
 
     "C++", 
 
     "Clojure", 
 
     "COBOL", 
 
     "ColdFusion", 
 
     "Erlang", 
 
     "Fortran", 
 
     "Groovy", 
 
     "Haskell" 
 
    ]; 
 
    $("#tags").autocomplete({ 
 
     source: availableTags 
 
    }); 
 
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="ui-widget"> 
 
    <label for="tags">Tags: </label> 
 
    <input id="tags"> 
 
</div>

Answer 3

Vous devez rechercher saisie semi-automatique. Quel langage utilisez-vous pour le développement web?

https://jqueryui.com/autocomplete/