Необходимо применить на веб-странице виджет Autocomplete.

Опубликовал: admin Monday, July 22, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Виджет Autocomplete помогает организовать список подходящих значений при заполнении пользователем поля ввода. Внешний вид виджета Autocomplete в одном из вариантов оформления представлен на рис. 17.8.

Рис. 17.8. Виджет Autocomplete в одном из вариантов оформления

Решение

Решение этой задачи с использованием темы оформления "ui-lightness" приведено в листинге 17.8.1.

Листинг 1 7 .8 .1 . Использование виджета Auto c om pl e te

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-8-1</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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>
</head>
<body>
<label for="tags">Tags: </label>
<input id="tags" type="text" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-17-8-1</title>

$(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>

</head>

<body>

</body>

</html>

Обсуждение

Виджет Autocomplete не требует сложной HTML-разметки (см. листинг 17.8.1). Достаточно всего лишь поля для ввода текста, т. е. обычного элемента input, который имеет значение text в атрибуте type. Дополнительная разметка добавлена лишь для того, чтобы иметь возможность задать стили в соответствии с выбранной темой оформления.

Итак, сначала мы подключили файл стилей css/ui-lightness/jquery-ui-1.8.9.custom.css одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки — js/jquery-1.4.4.min.js и файл js/jquery-ui-1.8.9.custom.min.js, объединяющий функциональность ядра UI и виджета Autocomplete. За связь виджета с HTML-разметкой отвечает фрагмент кода, приведенный в листинге 17.8.1а. Обратите внимание, что здесь же определяется массив данных для выпадающего списка подсказок. Это самый простой вариант использования виджета.

Листинг 1 7 .8 .1 а . Использование виджета Auto c om pl e te

[code language=”javascript”]

В примере, приведенном в листинге 17.8.1а, мы сразу же передали виджету Autocomplete обязательную опцию source, в которой определяется источник используемых данных. В рассмотренном примере источником данных является массив availableTags.

Описания всех возможных опций приведены в табл. 17.22.

Таблица 17.22. Опции виджета Autocomplete

Опция	Описание
disabled	Значение по умолчанию — false. Если установить значение true, то при инициализации функциональность виджета Autocomplete будет недоступна, однако ее можно включить впоследствии, например, при выполнении какоголибо условия
appendTo	Значение по умолчанию — ‘body’. В качестве значения этой опции допустим селектор jQuery. Определяет, к какому элементу должен быть добавлен выпадающий список подсказок
delay	Значение по умолчанию — 300. В этой опции указывается число миллисекунд, которое должно пройти после нажатия очередной клавиши, чтобы активизировался запрос на получение данных. Нулевое значение имеет смысл для локальных данных. При использовании запросов к серверу нулевое значение в этой опции может породить серьезную нагрузку
minLength	Значение по умолчанию — 1. В этой опции указывается количество символов, которое должно быть введено в поле ввода прежде, чем активизируются подсказки. Нулевое значение полезно при использовании локальных данных и списков из нескольких позиций. Это значение нужно увеличить при реализации запросов к серверу для получения данных и при наличии больших списков, где одному введенному символу может соответствовать несколько тысяч наименований

Таблица 17.22 (окончание)

Опция

Описание

source

Опция не имеет значения по умолчанию и должна быть обязательно определена. Значением опции может являться строка, массив или функция.

В любом случае в этой опции должен быть указан источник данных

Виджет Autocomplete может реагировать на некоторые события (листинг 17.8.2).

Листинг 1 7 .8 .2 . Использование виджета Auto c om pl e te

[code language=”javascript”]

В примере из листинга 17.8.2 мы определили в опции select callback-функцию, которая будет вызываться при наступлении события autocompleteselect, т. е. в тот момент, когда был выбран один из пунктов списка подсказок. Callback-функция принимает два аргумента: первый — объект event, второй — специальный объект ui. Организовав доступ к свойствам этих объектов, можно получить полезную информацию (мы выводим ее в окне предупреждения).

ui.item — объект со свойствами label и value. Здесь value — выбранное из списка значение. Свойство label содержит одинаковое значение с value, если данные представлены в виде массива строк, и может отличаться, если каждый элемент массива данных представлен в виде объекта.

В табл. 17.23 приведены описания событий виджета Autocomplete и названия опций, в которых можно определить callback-функции, вызываемые при наступлении события.

Виджет Autocomplete имеет и некоторые методы, позволяющие еще более расширить функциональность.

В листинге 17.8.3 мы перейдем к изучению методов виджета Autocomplete.

Таблица 17.23. События виджета Autocomplete

Опция	Событие	Описание
create	autocompletecreate	Наступает в момент инициализации
search	autocompletesearch	Наступает перед выполнением запроса. Если функция, определенная в этой опции вернет false, запрос не будет отправлен
open	autocompleteopen	Наступает в момент, когда открывается выпадающий список подсказок
focus	autocompletefocus	Происходит всякий раз, когда один из пунктов списка подсказок получает фокус
select	autocompleteselect	Наступает, когда выбран один из пунктов списка подсказок
close	autocompleteclose	Наступает, когда список подсказок закрывается. Событие наступает независимо от того, был выбран один из пунктов или нет
change	autocompletechange	Наступает после того, как выбран один из пунктов списка. Событие всегда наступает после close

Листинг 1 7 .8 .3 . Ис пол ь зование виджета Auto c om pl e te

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-8-3</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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, minLength: 0
});
$("#search").click(function(){ $("#tags").autocomplete("search", "as") });
$("#close").click(function(){ $("#tags").autocomplete("close") });
});
</script>
</head>
<body>
<button id="search">Искать "as"</button>
<button id="close">Закрыть</button>
<label for="tags">Tags: </label>
<input id="tags" type="text" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-17-8-3</title>

$(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, minLength: 0

});

$("#search").click(function(){ $("#tags").autocomplete("search", "as") });

$("#close").click(function(){ $("#tags").autocomplete("close") });

});

</script>

</head>

<body>

<button id="search">Искать "as"</button>

<button id="close">Закрыть</button>

</body>

</html>

В примере из листинга 17.8.3 в HTML-разметку добавлено две кнопки. При нажатии на кнопку Search вызываем одноименный метод используемого виджета и с передачей ему символов "as" — откроется список подсказок с подходящими значениями. Передавать искомую подстроку необязательно. Если она не передана, то откроется весь список полностью. При щелчке на кнопке Close будет применен метод close, который заставит закрыться список подсказок, если он был открыт.

В табл. 17.24 приведены описания всех доступных методов виджета Autocomplete.

Таблица 17.24. Методы виджета Autocomplete

Метод	Описание
destroy .autocomplete(‘destroy’)	Полностью удаляет всю функциональность виджета Autocomplete. Возвращает элементы в состояние, предшествующее инициализации
disable .autocomplete(‘disable’)	Временно запрещает использование всей функциональности виджета. Вновь разрешить ее можно с помощью метода enable
enable .autocomplete(‘enable’)	Разрешает использование всей функциональности виджета, если ранее она была запрещена методом disable
option .autocomplete(‘option’, optionName, [value])	Устанавливает значение любой опции виджета после инициализации
option .autocomplete(‘option’, optionName)	С помощью этого метода можно получить значение любой опции виджета после инициализации
widget .autocomplete(‘widget’)	Обеспечивает доступ к объекту, который представляет собой элемент с функциональностью Autocomplete
search .autocomplete(‘search, [value]’)	С помощью этого метода без передачи второго параметра можно открыть весь список. Если передать во втором параметре строку символов, то будет открыт список с подходящими подсказками
close .autocomplete(‘close’)	Закрывает список подсказок, если он был открыт ранее

До сих пор мы рассматривали примеры с использованием локальных данных, но виджет Autocomplete может формировать список подсказок из данных, хранящихся на сервере, в том числе и на удаленном. Пример приведен в листинге 17.8.4. Мы попробуем получать данные с реально работающего сервиса, расположенного по адресу http://geonames.org.

Листинг 1 7 .8 .4 . Использование виджета Autocomplete

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-8-4</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
.ui-autocomplete-loading {
background: #FFF url('css/ui-lightness/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
#city { width: 25em; }
#log { height: 200px; width: 600px; overflow: auto; }
</style>
<script type="text/javascript">
$(function() {
$("#city").autocomplete({
source: function(request,response) {
$.ajax({
url: "http://ws.geonames.org/searchJSON", dataType: "jsonp",
data: { featureClass: "P", style: "full", maxRows: 12,
name_startsWith: request.term
},
success: function(data) { response($.map(data.geonames, function(item) {
return {
label: item.name + ", "
+ item.countryName,
value: item.name + " ("
+ item.countryName + ")" + " [" + item.lat
+ ", " + item.lng
+ "]"
}
}));
}
});
},
minLength: 3,
select: function(event,ui) {
$("<p/>").text(ui.item ? ui.item.value : "Ничего не
выбрано!").prependTo("#log");
}
});
});
$("#log").attr("scrollTop", 0);
</script>
</head>
<body>
<label for="city">Город: </label><input id="city" /><br />
<span style="font-size:.8em;">Поддерживается <a href="http://geonames.org">geonames.org</a></span>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-17-8-4</title>

.ui-autocomplete-loading {

background: #FFF url('css/ui-lightness/images/ui-anim_basic_16x16.gif') right center no-repeat;

}

#city { width: 25em; }

#log { height: 200px; width: 600px; overflow: auto; }

</style>

$(function() {

$("#city").autocomplete({

source: function(request,response) {

$.ajax({

url: "http://ws.geonames.org/searchJSON", dataType: "jsonp",

data: { featureClass: "P", style: "full", maxRows: 12,

name_startsWith: request.term

success: function(data) { response($.map(data.geonames, function(item) {

return {

label: item.name + ", "

+ item.countryName,

value: item.name + " ("

+ item.countryName + ")" + " [" + item.lat

+ ", " + item.lng

+ "]"

}

}));

}

});

minLength: 3,

select: function(event,ui) {

$("<p/>").text(ui.item ? ui.item.value : "Ничего не

выбрано!").prependTo("#log");

}

});

$("#log").attr("scrollTop", 0);

</script>

</head>

<body>

<label for="city">Город: </label><input id="city" /><br />

<span style="font-size:.8em;">Поддерживается <a href="http://geonames.org">geonames.org</a></span>

</body>

</html>

Давайте сначала познакомимся с HTML-разметкой из листинга 17.8.4. В первом элементе div нас интересует только элемент input с идентификатором city. Сюда будем вводить начальные буквы (на латинице) населенного пункта, информацию о котором мы хотели бы получить. Элемент div с идентификатором log служит для занесения в него полученной информации.

Теперь займемся JavaScript-кодом. Метод autocomplete свяжем с элементом input#city и передадим этому методу объект, содержащий три свойства, определяющие пользовательские настройки, — обязательное свойство source, а также свойства minLength и select.

Мы уже знаем, что обязательное свойство source определяет источник используемых данных и может быть массивом (в случае локальных данных) или строкой, в которой указывается url обработчика на сервере. Но мы избрали наиболее гибкий способ — в качестве значения свойства source определили функцию. Эта функция принимает два аргумента. Первый аргумент — request — объект, содержащий единственное свойство term, в котором хранится строка, введенная пользователем в поле ввода. Второй аргумент — response — функция, с помощью которой будет обрабатываться полученный ответ. Внутри функции, определенной в свойстве source, мы имеем практически не ограниченную свободу действий.

Воспользовавшись такой свободой, напишем AJAX-запрос, который будет получать и обрабатывать необходимые данные. В настройках запроса указываем url, к которому будем обращаться, а также тип данных, ожидаемых в ответе. В опции data определим дополнительные параметры, которые будут отправлены в запросе. Чтобы знать, какие именно параметры необходимо передавать, следует внимательно ознакомиться с документацией по API сервиса, который предполагается использовать.

Перейдем к рассмотрению опции success, предполагая, что мы получили ответ на свой запрос.

Внутри функции, определенной нами в опции success, вызываем функцию обработки ответа response. В аргументе, который мы передаем этой функции, мы можем обрабатывать данные, полученные в ответе сервера так, как нам будет угодно.

В примере из листинга 17.8.4 мы вызываем метод $.map, чтобы применить некоторую функцию к каждому элементу объекта, переданному в первом аргументе. Внутри функции мы можем обращаться к свойствам объекта — item.countryName, item.lng, item.lat. Для того чтобы узнать перечень возможных свойств, необходимо обращаться к документации по API, которую предоставляет веб-сервис.

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

После такого подробного описания опции source, про опцию minLength даже говорить нечего — в ней передается количество введенных пользователем символов, прежде чем будет отправлен запрос.

Перейдем к последней опции — select. Здесь определяем функцию, вызываемую при выборе одного пункта из списка подсказок. Функция принимает два аргумента. Первый — стандартный объект события, второй — специальный объект ui, у которого имеются свойства label и value. По сути, это один из объектов, массив которых создавался при обработке ответа сервера, а именно выбранный пользователем объект.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

Необходимо применить на веб-странице виджет Autocomplete.

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply