Пример JQuery UI - автоматически (автозаполнение)
Поиск и значение фильтра на основе пользовательского ввода, что позволяет пользователям быстро найти и выбрать из списка предустановленных значений.
Для получения более подробной информации о компоненте автозаполнения, обратитесь к документации по API автоматически пользователь (автозаполнения виджете) .
Используйте этот раздел для search.php загрузки .
По умолчанию функция
Когда вы поле ввода, выполняется автоматически (автозаполнение) члены предоставлять консультации. В этом примере, предусмотрен рекомендуемый вариант языка программирования, можно ввести "JA" попробовать, вы можете получить Java или JavaScript.
Источник данных представляет собой простой массив JavaScript с использованием опции источников доступны для членов.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозаполнения (автозаполнение) - функция по умолчанию </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
вар availableTags = [
"ActionScript",
"AppleScript",
"АСП",
"BASIC",
"С",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Фортран",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Лисп",
"Perl",
"PHP",
"Python",
"Рубин",
"Скала",
"Схема"
];
$ ( "#tags") .autocomplete ({
Источник: availableTags
});
});
</ Script>
</ Head>
<Body>
<Div класс = "UI-виджета">
<Ярлык = "метки"> тег: </ метка>
<Input ID = "метки">
</ Div>
</ Body>
</ HTML>
акцентированный
автозаполнение поля с помощью опции источника для настройки результатов, чтобы соответствовать элементы с диакритическими знаками, даже если текстовое поле не содержит акцентированные символы будут совпадать. Но если вы вводите акцентированных символов в текстовом поле, он не отображает результаты непищевых напряжений.
Попробуйте ввести "Джо", вы видите "Джон" и "Jorn", затем введите "Джо", будет видеть только "Jorn".
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозаполнения (автозаполнение) - акцентировано </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
Имена VAR = [ "Йорн Zaefferer", "Скотт Гонсалеса", "Резиг"];
переменная accentMap = {
"А": "а",
"О": "о"
};
вар = нормализуют функции (термин) {
вар RET = "";
для (вар я = 0; я <term.length; я ++) {
RET + = accentMap [term.charAt (я)] || term.charAt (I);
}
вернуться в отставке;
};
$ ( "#developer") .autocomplete ({
Источник: функция (запрос, ответ) {
переменная сличитель = новый RegExp ($ .ui.autocomplete.escapeRegex (request.term), "я");
ответ ($ .grep (имена, функции (значение) {
Значение = value.label || value.value || значение;
вернуть matcher.test (значение) || matcher.test (нормализовать (значение));
}));
}
});
});
</ Script>
</ Head>
<Body>
<Div класс = "UI-виджета">
<Форма>
<Ярлык = "разработчик"> Разработчик: </ метка>
<Input ID = "разработчик">
</ Форма>
</ Div>
</ Body>
</ HTML>
классификация
Результат поиска классификации. Попробуйте ввести "а" или "N".
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозаполнения (автозаполнение) - Категория </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-автополный-категория {
шрифта: жирный;
обивка: .2em .4em;
Запас: .8em 0 .2em;
высота линии: 1,5;
}
</ Style>
<Script>
$ .widget ( "Custom.catcomplete", $ .ui.autocomplete, {
_renderMenu: функция (улица, элементы) {
вар, что = это,
currentCategory = "";
$ .each (Элементы, функции (индекс, элемент) {
если (item.category! = currentCategory) {
ul.append ( "<литий класс = 'щ-автополный-категория"> "+ item.category +" </ li> ");
currentCategory = item.category;
}
that._renderItemData (улица, пункт);
});
}
});
</ Script>
<Script>
$ (Function () {
данные VAR = [
{Label: "Anders", категория: ""},
{Label: "Андреаса", категория: ""},
{Label: "Антал", категория: ""},
{Label: "annhhx10", категория: "Продукты"},
{Label: "annk К12", категория: "Продукты"},
{Label: "annttop C13", категория: "Продукты"},
{Label: "Anders Andersson", категория: "Люди"},
{Label: "Andreas Andersson", категория: "Люди"},
{Label: "Андреаса Джонсон", категория: "Люди"}
];
$ ( "#search") .catcomplete ({
Задержка: 0,
Источник: данные
});
});
</ Script>
</ Head>
<Body>
<Ярлык = "Поиск"> Поиск: </ метка>
<Input ID = "поиск">
</ Body>
</ HTML>
Combo коробка (выпадающий)
Пользовательский компонент, созданный автозаполнения и Button. Вы можете ввести некоторые символы, чтобы получить на основе ваших результатов фильтрации входных данных, или выбрать из полного списка с помощью кнопок.
Вход считывается из существующего выбора элементов, перейдя к опции автозаполнения, чтобы настроить источник.
Это не является идеальным членом неподдерживаемый. Вот просто, чтобы продемонстрировать возможности настройки автозаполнения. Для получения более подробной информации об этой части работ, пожалуйста , нажмите здесь , чтобы просмотреть статьи JQuery.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозаполнения (автозаполнение) - выпадающий (выпадающий) </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.custom-выпадающий {
позиция: относительная;
Дисплей: встроенный блок;
}
.custom-выпадающий-тумблер {
позицию: абсолютная;
верх: 0;
снизу: 0;
Левое поле: -1px;
обивка: 0;
/ * Поддержка: IE7 * /
* Высота: 1.7em;
* Верхняя часть: 0.1em;
}
.custom-выпадающий-вход {
Запас: 0;
обивка: 0.3em;
}
</ Style>
<Script>
(Функция ($) {
$ .widget ( "Custom.combobox", {
_create: функция () {
this.wrapper = $ ( "<SPAN>")
.addClass ( "выпадающий на заказ")
.insertAfter (this.element);
this.element.hide ();
this._createAutocomplete ();
this._createShowAllButton ();
},
_createAutocomplete: функция () {
вар выбран = this.element.children ( ": выбранные"),
Значение = selected.val () selected.text (): "";?
this.input = $ ( "<вход>")
.appendTo (this.wrapper)
.val (значение)
.attr ( "название", "")
.addClass ( "заказ-выпадающий-вход UI-виджет UI-виджет-контента UI-состоянии по умолчанию пользовательский интерфейс угла налево")
.autocomplete ({
Задержка: 0,
MINLENGTH: 0,
Источник: $ .proxy (это, "_source")
})
.tooltip ({
tooltipClass: "Пользовательский интерфейс-государством изюминка"
});
this._on (this.input, {
autocompleteselect: функция (событие, щ) {
ui.item.option.selected = TRUE;
this._trigger ( "выбрать", событие, {
Пункт: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: функция () {
вход переменная = this.input,
wasOpen = ложь;
$ ( "<a>")
.attr ( "TabIndex", -1)
.attr ( "название", "Показать все товары")
.tooltip ()
.appendTo (this.wrapper)
.button ({
иконки: {
первичная обмотка: "Пользовательский интерфейс-значок-треугольник-1-х"
},
Текст: ложная
})
.removeClass ( "Пользовательский интерфейс угла всех")
.addClass ( "заказ-выпадающий-тумблер UI-угловой правый")
.mousedown (функция () {
wasOpen = input.autocomplete ( "виджетов") .а ( ": видимый");
})
.click (функция () {
input.focus ();
// Если вы видели закрыт, если (wasOpen) {
возвращение;
}
// Передает пустую строку как значение поиска, показывая все результаты input.autocomplete ( "поиск", "");
});
},
_source: функция (запрос, ответ) {
переменная сличитель = новый RegExp ($ .ui.autocomplete.escapeRegex (request.term), "я");
ответ (this.element.children ( "вариант") .map (функция () {
вар текст = $ (это) .text ();
если (this.value && (! request.term || matcher.test (текст)))
вернуться {
этикетки: текст,
Значение: текст,
вариант: это
};
}));
},
_removeIfInvalid: функция (событие, щ) {
// Выберите элемент и не выполняет другие действия, если (ui.item) {
возвращение;
}
// Поиск матча (чувствительно к регистру)
значение переменная = this.input.val (),
valueLowerCase = value.toLowerCase (),
действительный = ложь;
this.element.children ( "вариант") .each (функция () {
если ($ (это) .text (). toLowerCase () === valueLowerCase) {
this.selected = действительный = TRUE;
возвращение ложным;
}
});
// Найдено совпадение, никакие другие действия, если (действительный) {
возвращение;
}
// Удалите недопустимое значение this.input
.val ( "")
.attr ( "название", значение + "не соответствует ни одному элемент")
.tooltip ( "открыть");
this.element.val ( "");
this._delay (функция () {
this.input.tooltip ( "закрыть") .attr ( "название", "");
}, 2500);
this.input.data ( "UI-автозаполнения") .term = "";
},
_destroy: функция () {
this.wrapper.remove ();
this.element.show ();
}
});
}) (JQuery);
$ (Function () {
$ ( "#combobox") .combobox ();
$ ( "#toggle") .click (Функция () {
$ ( "#combobox") .toggle ();
});
});
</ Script>
</ Head>
<Body>
<Div класс = "UI-виджета">
<Label> Ваш любимый язык программирования: </ метка>
<Выбрать ID = "выпадающий">
<Значение Option = ""> Выберите ... </ вариант>
<Значение Option = "ActionScript"> ActionScript </ опции>
<Значение Option = "AppleScript"> AppleScript </ вариант>
<Значение Option = "АСП"> Asp </ вариант>
<Значение Option = "BASIC"> BASIC </ вариант>
<Значение Option = "C"> C </ вариант>
<Значение Option = "C ++"> C ++ </ вариант>
<Значение Option = "Clojure"> Clojure </ вариант>
<Значение Option = "COBOL"> COBOL </ вариант>
<Значение Option = "ColdFusion"> ColdFusion </ вариант>
<Значение Option = "Erlang"> Erlang </ вариант>
<Значение Option = "Fortran"> Fortran </ вариант>
<Значение Option = "Groovy"> Groovy </ вариант>
<Значение Option = "Haskell"> Haskell </ вариант>
<Значение Option = "Java"> Java </ вариант>
<Значение Option = "JavaScript"> JavaScript </ вариант>
<Значение Option = "Лисп"> Лисп </ вариант>
<Значение Option = "Perl"> Perl </ вариант>
<Значение Option = "PHP"> PHP </ вариант>
<Значение Option = "Python"> Python </ вариант>
<Значение Option = "Рубин"> Рубин </ вариант>
<Значение Option = "Scala"> Scala </ вариант>
<Значение Option = "Схема"> Схема </ вариант>
</ Select>
</ Div>
Кнопка <ID = "тумблер"> основанный дисплей окно выбора </ кнопка>
</ Body>
</ HTML>
Пользовательские данные и дисплей
Вы можете использовать формат пользовательских данных, а также путем сосредоточения внимания просто переопределить поведение по умолчанию и выберите для отображения данных.
Попробуйте ввести "J", или нажмите клавишу со стрелкой вниз, вы можете получить список элементов.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозаполнения (автозаполнение) - Пользовательские данные и отображает </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Проект метки {
Дисплей: блок;
шрифта: жирный;
краю дна: 1em;
}
# Project-значок {
плавать: слева;
высота: 32px;
ширина: 32px;
}
# Проект-описание {
Запас: 0;
обивка: 0;
}
</ Style>
<Script>
$ (Function () {
вар проекты = [
{
Значение: "JQuery",
метка: "Jquery",
по убыванию: "записываемый меньше, делать больше, библиотека JavaScript",
значок: "jquery_32x32.png"
},
{
Значение: "JQuery-уй»,
метка: "JQuery UI",
убывание: "официальная библиотека пользовательского интерфейса для JQuery",
значок: "jqueryui_32x32.png"
},
{
Значение: "sizzlejs",
метка: "Сиззле JS",
по убыванию: "селектор чистый движок JavaScript-CSS",
значок: "sizzlejs_32x32.png"
}
];
$ ( "#project") .autocomplete ({
MINLENGTH: 0,
Источник: проекты,
фокус: функции (события, Ui) {
$ ( "#project") .val (Ui.item.label);
возвращение ложным;
},
выберите: функцию (событие, Ui) {
$ ( "#project") .val (Ui.item.label);
$ ( "# Project-ID") .val (ui.item.value);
$ ( "# Проект-описание") .html (ui.item.desc);
$ ( "# Project-икона") .attr ( "ЦСИ", "изображения /" + ui.item.icon);
возвращение ложным;
}
})
.data ( "UI-автозаполнения") ._ renderItem = функция (улица, пункт) {
вернуть $ ( "<li>")
.append ( "<a>" + item.label + "<br>" + item.desc + "</a>")
.appendTo (UL);
};
});
</ Script>
</ Head>
<Body>
<Div ID = "Проект-метка"> Выберите элемент (тип "J"): </ DIV>
<Img ID = "Проект-значок" SRC = "Images / transparent_1x1.png" класс = "Пользовательский интерфейс состояния по умолчанию" ALT = "">
<Input ID = "Проект">
<Тип входного = "скрытые" ID = "Проект-идентификатор">
<P ID = "Проект-описание"> </ p>
</ Body>
</ HTML>
Несколько значений
Использование: Введите несколько символов, таких как "J", вы можете увидеть результаты соответствующих языков программирования. Выберите значение, а затем введите символы продолжают добавлять дополнительную ценность.
Этот пример демонстрирует, как использовать опции источника и события для достижения в стоимости одного текстового поля, чтобы ввести несколько автоматически.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозаполнения (автозаполнение) - несколько значений </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
вар availableTags = [
"ActionScript",
"AppleScript",
"АСП",
"BASIC",
"С",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Фортран",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Лисп",
"Perl",
"PHP",
"Python",
"Рубин",
"Скала",
"Схема"
];
Функция Split (Вэл) {
вернуть val.split (/ \ s * /);
}
Функция extractLast (термин) {
вернуться раскол (термин) .pop ();
}
$ ( "#tags")
// При выборе пункта, не выходя из текстового поля .bind ( "KeyDown", функция (событие) {
если (event.keyCode === $ .ui.keyCode.TAB &&
$ (Это) .data ( "UI-автозаполнения") .menu.active) {
event.preventDefault ();
}
})
.autocomplete ({
MINLENGTH: 0,
Источник: функция (запрос, ответ) {
// Назад автозаполнения, но извлечь последний ответ на вход ($ .ui.autocomplete.filter (
availableTags, extractLast (request.term)));
},
фокус: функция () {
// Предотвращение получения значения вставки фокус возвращение ложным;
},
выберите: функцию (событие, Ui) {
Термины VAR = Раскол (this.value);
// Удалить текущий входной terms.pop ();
// Добавление выбранной опции terms.push (ui.item.value);
// Добавить заполнитель, добавьте запятую в конце + Space terms.push ( "");
this.value = terms.join ( ",");
возвращение ложным;
}
});
});
</ Script>
</ Head>
<Body>
<Div класс = "UI-виджета">
<Ярлык = "метки"> Языки программирования: </ метка>
<Input ID = "метки" размер = "50">
</ Div>
</ Body>
</ HTML>
Несколько значений, дистанционное
Использование: Введите два символа, по крайней мере, чтобы получить имена птиц. Выберите значение, а затем введите символы продолжают добавлять дополнительную ценность.
Этот пример демонстрирует, как использовать опции источника и события для достижения в стоимости одного текстового поля, чтобы ввести несколько автоматически.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозаполнения (автозаполнение) - несколько значений, удаленный </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-автозаполнения загрузкой {
фон: белый URL ( 'изображения / UI-anim_basic_16x16.gif') правый центральный не повторять;
}
</ Style>
<Script>
$ (Function () {
Функция Split (Вэл) {
вернуть val.split (/ \ s * /);
}
Функция extractLast (термин) {
вернуться раскол (термин) .pop ();
}
$ ( "#birds")
// При выборе пункта, не выходя из текстового поля .bind ( "KeyDown", функция (событие) {
если (event.keyCode === $ .ui.keyCode.TAB &&
$ (Это) .data ( "UI-автозаполнения") .menu.active) {
event.preventDefault ();
}
})
.autocomplete ({
Источник: функция (запрос, ответ) {
$ .getJSON ( "Search.php", {
Термин: extractLast (request.term)
}, Ответ);
},
поиск: функция () {
// Пользовательский минимальный срок длина переменная = extractLast (this.value);
если (term.length <2) {
возвращение ложным;
}
},
фокус: функция () {
// Предотвращение получения значения вставки фокус возвращение ложным;
},
выберите: функцию (событие, Ui) {
Термины VAR = Раскол (this.value);
// Удалить текущий входной terms.pop ();
// Добавление выбранной опции terms.push (ui.item.value);
// Добавить заполнитель, добавьте запятую в конце + Space terms.push ( "");
this.value = terms.join ( ",");
возвращение ложным;
}
});
});
</ Script>
</ Head>
<Body>
<Div класс = "UI-виджета">
<Ярлык = "птицы"> Птица: </ метка>
<Input ID = "птицы" размер = "50">
</ Div>
</ Body>
</ HTML>
Источник данных JSONP Remote
При вводе символов в текстовом поле, компоненты автозаполнения дают результаты советы. В этом примере, при вводе по крайней мере, два символа в текстовом поле, будет отображаться имя соответствующего города.
В этом примере источник данных geonames.org WebService . Хотя выбор текстового поля после элемента название города, но будет отображать больше информации для того, чтобы найти правильную запись. Данные также могут быть обратного вызова, результаты отображаются в окне, расположенном ниже.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозаполнения (автозаполнение) - JSONP удаленный источник данных </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-автозаполнения загрузкой {
фон: белый URL ( 'изображения / UI-anim_basic_16x16.gif') правый центральный не повторять;
}
#city {ширина: 25em;}
</ Style>
<Script>
$ (Function () {
Функция журнала (сообщение) {
$ ( "<Div>") .text (сообщение) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#city") .autocomplete ({
Источник: функция (запрос, ответ) {
$ .ajax ({
URL: "http://ws.geonames.org/searchJSON",
Datatype: "JSONP",
Данные: {
featureClass: "P",
стиль: "полный",
maxRows: 12,
name_startsWith: request.term
},
успех: функция (данные) {
ответ ($ .map (data.geonames, функция (пункт) {
вернуться {
Этикетка: item.name + (item.adminName1 "," + item.adminName1 :? "") + "," + item.countryName,
Значение: item.name
}
}));
}
});
},
MINLENGTH: 2,
выберите: функцию (событие, Ui) {
войти (ui.item?
"Выбранный:" + ui.item.label:
"Ничего не выбрано, вход был" + this.value);
},
Открыть: функция () {
$ (Это) .removeClass ( "Пользовательский интерфейс угла всех") .addClass ( "Пользовательский интерфейс угла-топ");
},
близко: функция () {
$ (Это) .removeClass ( "Пользовательский интерфейс-угловой-топ") .addClass ( "Пользовательский интерфейс угла всех");
}
});
});
</ Script>
</ Head>
<Body>
<Div класс = "UI-виджета">
<Ярлык = "города"> Ваш город: </ метка>
<Input ID = "город">
Работает на <a href="http://geonames.org" target="_blank"> geonames.org </a>
</ Div>
<Div класс = "UI-виджета" стиль = "маржа-топ: 2em; семейство шрифтов: Arial">
Результаты:
<Div ID = "Журнал" стиль = "высота: 200px; ширина: 300px; переполнения: авто;" класс = "UI-виджета-контента"> </ DIV>
</ Div>
</ Body>
</ HTML>
Удаленный источник данных
При вводе символов в текстовом поле, компоненты автозаполнения дают результаты советы. В этом примере, при вводе по крайней мере, два символа в текстовом поле, он будет отображать соответствующие имена птиц.
В этом примере в качестве источника данных возвращается в формате JSON данные сценария на стороне сервера, чтобы указать простые опции источника. Кроме того, параметр MINLENGTH установлен на 2, чтобы избежать запрос возвращает слишком много результатов, выберите событие, чтобы отобразить некоторую обратную связь.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозаполнения (автозаполнение) - удаленный источник данных </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-автозаполнения загрузкой {
фон: белый URL ( 'изображения / UI-anim_basic_16x16.gif') правый центральный не повторять;
}
</ Style>
<Script>
$ (Function () {
Функция журнала (сообщение) {
$ ( "<Div>") .text (сообщение) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#birds") .autocomplete ({
Источник: "search.php",
MINLENGTH: 2,
выберите: функцию (событие, Ui) {
войти (ui.item?
"Выбранный:" + ui.item.value + "ака" + ui.item.id:
"Ничего не выбрано, вход был" + this.value);
}
});
});
</ Script>
</ Head>
<Body>
<Div класс = "UI-виджета">
<Ярлык = "птицы"> Птица: </ метка>
<Input ID = "птицы">
</ Div>
<Div класс = "UI-виджета" стиль = "маржа-топ: 2em; семейство шрифтов: Arial">
Результаты:
<Div ID = "Журнал" стиль = "высота: 200px; ширина: 300px; переполнения: авто;" класс = "UI-виджета-контента"> </ DIV>
</ Div>
</ Body>
</ HTML>
Удаленный кэш
При вводе символов в текстовом поле, компоненты автозаполнения дают результаты советы. В этом примере, при вводе по крайней мере, два символа в текстовом поле, он будет отображать соответствующие имена птиц.
Для повышения производительности, добавьте сюда несколько локальный кэш, другие примеры подобных удаленных источников данных. Здесь сохраняются только кэш запросов, а кэш может быть расширена до нескольких значений, каждая запись является значением.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозаполнения (автозаполнение) - Удаленный кэш </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-автозаполнения загрузкой {
фон: белый URL ( 'изображения / UI-anim_basic_16x16.gif') правый центральный не повторять;
}
</ Style>
<Script>
$ (Function () {
кэш-переменная = {};
$ ( "#birds") .autocomplete ({
MINLENGTH: 2,
Источник: функция (запрос, ответ) {
Термин переменная = request.term;
если (термин в кэше) {
ответ (кэш [термин]);
возвращение;
}
$ .getJSON ( "Search.php", запрос, функция (данные, статус, XHR) {
Кэш [термин] = данные;
ответ (данные);
});
}
});
});
</ Script>
</ Head>
<Body>
<Div класс = "UI-виджета">
<Ярлык = "птицы"> Птица: </ метка>
<Input ID = "птицы">
</ Div>
</ Body>
</ HTML>
Scrollable результат
При отображении длинный список опций, вы можете просто установить Max-высоту, чтобы предотвратить автозаполнения меню для отображения меню тоже. Попробуйте ввести "а" или "S", чтобы получить результат длинного списка с прокруткой.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозаполнения (автозаполнение) - прокручивать результат </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-автозаполнения {
макс-высота: 100px;
Переполнение-у: авто;
/ * Предотвратить горизонтальную полосу прокрутки * /
Переполнение-х: скрытый;
}
/ * IE 6 не поддерживает максимальную высоту-
* Мы используем вместо высоты, но это заставит меню всегда отображается как высота * /
* Html .ui-автозаполнения {
высота: 100px;
}
</ Style>
<Script>
$ (Function () {
вар availableTags = [
"ActionScript",
"AppleScript",
"АСП",
"BASIC",
"С",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Фортран",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Лисп",
"Perl",
"PHP",
"Python",
"Рубин",
"Скала",
"Схема"
];
$ ( "#tags") .autocomplete ({
Источник: availableTags
});
});
</ Script>
</ Head>
<Body>
<Div класс = "UI-виджета">
<Ярлык = "метки"> тег: </ метка>
<Input ID = "метки">
</ Div>
</ Body>
</ HTML>
данные XML
Этот пример показывает, как получить некоторые данные XML и использует метод JQuery для ее решения и предоставить его автозаполнение в качестве источника данных.
Этот пример также можно использовать в качестве разрешения ссылки удаленного источника данных XML - Анализ происходит при каждом запросе источника обратного вызова.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI автозавершения (автозаполнение) - данные XML </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-автозаполнения загрузкой {фон: белый URL ( 'изображения / UI-anim_basic_16x16.gif') правый центральный не повторять;}
</ Style>
<Script>
$ (Function () {
Функция журнала (сообщение) {
$ ( "<Div />") .text (сообщение) .prependTo ( "#log");
$ ( "#log") .attr ( "ScrollTop", 0);
}
$ .ajax ({
URL: "london.xml",
Datatype: "XML",
успех: функция (xmlResponse) {
вар данных = $ ( "geoname", xmlResponse) .map (функция () {
вернуться {
Стоимость: $ ( "имя", это) .text () + "," +
($ .trim ($ ( "CountryName", это) .text ()) || "(неизвестная страна)"),
ID: $ ( "geonameId", это) .text ()
};
.}) Get ();
$ ( "#birds") .autocomplete ({
Источник: данные,
MINLENGTH: 0,
выберите: функцию (событие, Ui) {
войти (ui.item?
"Выбранный:" + ui.item.value + ", geonameId:" + ui.item.id:
"Ничего не выбрано, вход был" + this.value);
}
});
}
});
});
</ Script>
</ Head>
<Body>
<Div класс = "UI-виджета">
<Ярлык = "птицы"> Лондон Match: </ метка>
<Input ID = "птицы">
</ Div>
<Div класс = "UI-виджета" стиль = "маржа-топ: 2em; семейство шрифтов: Arial">
Результаты:
<Div ID = "Журнал" стиль = "высота: 200px; ширина: 300px; переполнения: авто;" класс = "UI-виджета-контента"> </ DIV>
</ Div>
</ Body>
</ HTML>