Как автозаполнять текстовое поле при нажатии клавиши

Question

Поэтому у меня есть требование, когда мне нужно набрать что-то, а затем на полпути, оно должно автоматически заполнить остальную часть вещей.

Пример

У меня есть текстовое поле, где я начинаю набирать «седловины», то после того, как я нажимаю пространство текстовое поле должно показать мне «столбец», авто для автоматической корректировки системы.

Кроме того, мне было интересно, может ли это быть реализовано как массив или столбец данных, поступающих из моей БД?

Я сделал что-то подобное, но это изменяет значения внутреннего поля HTML. Мне это нужно для текстового поля.

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>

Я новичок в этом, так что любая помощь будет высоко оценила

Answer 1

Загрузите значения из базы данных в JSON и использовать e.target свойство, которое будет содержать HTML элемент, где произошло event.

Попробуйте следующий код:

// 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

Try JQuery Авто предлагает: Посетите 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

Вы должны исследовать автозаполнение. Какой язык вы используете для веб-разработки?

https://jqueryui.com/autocomplete/