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

Примере

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

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

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

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>

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

1
Venky 9 Янв 2017 в 13:43

3 ответа

Лучший ответ

Загрузите ваши значения из вашей базы данных в 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>
2
Tha'er M. Al-Ajlouni 9 Янв 2017 в 12:16

Попробуйте jquery Автоматическое предложение. Посетите ЗДЕСЬ

  $( 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>
1
Suchit kumar 9 Янв 2017 в 10:58

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

https://jqueryui.com/autocomplete/

0
hsyn.ozkara 9 Янв 2017 в 11:20