Javascript/html автозаполнение текстового поля

Я разрабатываю веб-страницу, которая требует много текстовых полей для автозаполнения. Поскольку я новичок в javascript, мне очень сложно создать свой собственный автозаполнение текстового поля. Поэтому я искал много примеров из Интернета, но они работают только для одного текстового поля. Это означает, что я не могу использовать один и тот же файл js для создания другого текстового поля автозаполнения. Я тоже не нашел таких примеров в stackoverflow. Может ли кто-нибудь помочь мне в этом?

Ответ 1

Используйте JQuery с плагином AutoSuggest.

http://docs.jquery.com/Plugins/autocomplete

Включите JS-библиотеки (см. документацию выше), затем выполните это в HTML:

<input type="text" class="autocomplete" name="n1" />
<input type="text" class="autocomplete" name="n2" />
<input type="text" class="autocomplete" name="n3" />
<input type="text" class="autocomplete" name="n4" />

Затем добавьте Autocomplete в CSS-класс в ваш Javascript:

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$(".autocomplete").autocomplete(data);

Ответ 2

Вот решение для создания автозаполнения без JQUERY или No JAVASCRIPT.. просто html5 поле ввода и тег datalist.

<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox-->
<datalist id="languageList">
<option value="HTML" />
<option value="CSS" />
<option value="JavaScript" />
<option value="SQL" />
<option value="PHP" />
<option value="jQuery" />
<option value="Bootstrap" />
<option value="Angular" />
<option value="ASP.NET" />
<option value="XML" />
</datalist>

больше о нем здесь

Ответ 3

Я рекомендую проверить это:

http://complete-ly.appspot.com/

Простой случай должен соответствовать вашим требованиям:

var cly = completely(document.getElementById('a-div-wrapping-your-autocomplete-box');
cly.options = [ 'your','array','of','options','(possibly sorted somehow)'];

Ответ 4

Плагин AutoSuggest устарел и теперь включен в интерфейс jQuery.

Проверьте это:
http://jqueryui.com/demos/autocomplete/

Ответ 5

Если вы новичок в веб-разработке, я бы рекомендовал вам использовать jquery и пакет jqueryUI. Ссылка выше - демонстрационная страница, где вы можете играть с различными типами источников данных. Я скопировал пример, который использует простой массив в качестве источника данных

<script>
    $(function() {
        var availableTags = [
            "ActionScript",         "AppleScript",
            "Asp",              "BASIC",
            "C",                "C++",
            "Clojure",              "COBOL",
            "ColdFusion",           "Erlang",
            "Fortran",              "Groovy",
            "Haskell",              "Java",
            "JavaScript",           "Lisp",
            "Perl",             "PHP",
            "Python",               "Ruby",
            "Scala",                "Scheme"
        ];
        $( ".tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>

<div><input class="tags" type="text" /></div>
<div><input class="tags" type="text" /></div>

Ответ 6

Вот простой способ, просто используйте событие onkeyup:

<input type="text" id="a" onkeyup="myFunction()">
<br/>
<br/>


<script type="text/javascript">
function myFunction() {

    var x = document.getElementById("a").value;  

    document.getElementById("abc").innerHTML = x;   
}
</script>