Как добавить простую функцию автозаполнения в форму без использования Ajax?

Question

Я хочу создать форму для моего пользователя, которая показывает выпадающий список из 10 элементов / строк (который я могу предоставить, не используя Ajax), и все, что я хочу, - это чтобы этот список всплывал при попытке заполните форму и позвольте пользователю добавить элемент / строку из выпадающего списка ...

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

Заранее спасибо.

Answer 1

использовать jquery ui автозаполнение .

$(document).ready(function(){
    var data = //array of strings
    $("#example").autocomplete(data); //example is id of input element
  });

ОБНОВЛЕНИЕ :: Вы можете настроить пользовательский интерфейс jQuery при загрузке , оптимизированной только для автозаполнения.

Answer 2

jQuery UI имеет автозаполнение . Это не требует ajax. Просто массив строк, инициализированных при загрузке. С веб-сайта jQuery UI

<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 class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

Для этой функции встраиваемые модули jQuery UI составляют 38 КБ.

Answer 3

Вот две статьи, показывающие методы чистого Javascript (без jQuery) для автозаполнения:

Простое решение с использованием текстового поля со списком <select> для хранения / отображения вариантов выбора:
http://www.webreference.com/programming/javascript/gr/column5/

Более сложный пример, предлагающий больше возможностей настройки (включает обработчики событий размытия / фокусировки / мыши):
http://www.devarticles.com/c/a/JavaScript/Javascript-AutoComplete/