В Интернете есть много плагинов, которые позволяют вам добавить эту функциональность на наш сайт, однако они разработаны в рамках программной схемы, которую мы, возможно, не знаем, и тогда ее модификация и реализация, как правило, несколько утомительны и сложны. Но еще не все потеряно, поскольку jQuery и его расширение библиотеки jQuery UI предоставляют нам несколько методов для реализации функциональности автозаполнения на нашем сайте без особых проблем.
Прежде чем перейти к примеру, давайте посмотрим на метод автозаполнения и его работу.
Метод автозаполнения ()
Метод автозаполнения можно использовать двумя способами:
$ (селектор, контекст) .autocomplete (параметры) $ (селектор, контекст) .autocomplete («действие», params)
Этот метод объявляет, что HTML должен управляться как поле, отображающее список предложений, а параметры определяют поведение этого списка в тот момент, когда пользователь начинает писать в поле.
Из символов, введенных в текстовое поле, проводится сравнение со значениями, содержащимися в опциях источника.
Давайте посмотрим на практический пример, чтобы увидеть его лучше:
1- Сначала мы включаем необходимые файлы:
2. Мы создаем переменную, которая содержит слова, которые будут списком предложений, доступных для автозаполнения, список предложений также может быть получен из JSON и даже из XML, даже немного расширяя функциональность путем добавления ajax, но в этом примере Мы будем использовать переменную, чтобы не усложнять вещи:
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C ++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy" ", " Haskell ", " Java ", " Javascript ", " Lisp ", " Perl ", " PHP ", " Python ", " Ruby ", " Scala ", " Scheme "];
3- Мы вызываем метод, связываем селектор и даем в качестве опции исходный параметр, указывающий, где он получит список предложений:
$ ("#tags") .autocomplete ({source: availableTags}); 4- Чтобы закончить в нашем HTML, мы создаем
который будет содержать наш ввод, который будет тем, кто реализует автозаполнение:
Метки:
После реализации что-то вроде этого должно выглядеть так:
Наконец, я оставлю полный код, чтобы вы могли попробовать его сами, не забывая, что мы можем заполнить наш список предложений из нескольких допустимых источников и применить различные опции и события, которые повысят функциональность нашего компонента.
jQuery UI Autocomplete - функциональность по умолчанию $ (function () {var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C ++", "Clojure", "COBOL", "ColdFusion" ", " Erlang ", " Fortran ", " Groovy ", " Haskell ", " Java ", " Javascript ", " Lisp ", " Perl ", " PHP ", " Python ", " Ruby ", " Scala ", "Схема"]; $ ("#tags") .autocomplete ({source: availableTags});});Метки:
- 0
СТАТЬИ