jQuery Autocomplete: автозаполнение
Раздел:
Programming /
Ajax
@
29.04.2008 |
Ключевые слова: google suggest автозаполнение autocomplete jquery
Автор: Isis
Источник: habrahabr
Если Вы пробовали что-то найти в Google, то наверняка знаете, что после ввода символа в текстовое поле появляется выпадающий список, который содержит десяток строк со словами, начальные символы которых совпадают с теми символами, что Вы уже успели ввести. Так работает Google Suggest. Почему бы не сделать так же на своем сайте? Ведь это удобно. К тому же с библиотекой jQuery это не так уж и сложно... © Gennady
Demo
Я предлагаю вам использовать версию autocomplete от bassistance т.к. в их последнеей (1.0) версии присутствует фикс от бага в котором ие не хотел выводить красивый выход селекта...
Скачать можно здесь: Download
Тестировалось в: Firefox 2, IE 6 & 7, Opera 9, Safari 3
Пример:
"http://www.rusdoc.ru/go.php?http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://www.rusdoc.ru/go.php?http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://www.rusdoc.ru/go.php?http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://www.rusdoc.ru/go.php?http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://www.rusdoc.ru/go.php?http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://www.rusdoc.ru/go.php?http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://www.rusdoc.ru/go.php?http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>
Все эксемплы присутствуют в скрипте...да и для русских символов используйте мультибайтовые символы с хидерами.
Немного еще можно почитать: здесь
Вернуться в раздел:
Programming /
Ajax
