Довольно часто при разработке проекта требуется создать поле поиска или ввода данных, в которое передаются данные автоподстановки. Например, поиск названия штата по нескольким символам. Этот пример со статическими данными можно найти на странице проекта Twitter Bootstrap – он прост и информативен:
Код примера:
<input type="text" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut", "Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas", "Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota", "Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey", "New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon", "Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas", "Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
Для работы с Twitter Bootstrap нам понадобиться подключить сам скрипт Twitter Bootstrap и файл стилей используемый этим скриптом:
<head> <link href="assets/css/bootstrap.css" rel="stylesheet"> <script src="assets/js/bootstrap.js"></script> </head>
Но в большинстве случаев нам необходимы данные из БД, например поиск пользователя по имени. В этом случае нам необходим запрос к БД при помощи ajax:
<!-- поле ввода имени --> <input type="text" name="name"> <input type="text" name="email"> <input type="text" name="phone"> <!-- подключаем typeahead --> <script> $('input[name=username]').typeahead({ //источник данных source: function (query, process) { return $.post('getusername', {'name':query}, function (response) { var data = new Array(); //преобразовываем данные из json в массив $.each(response, function(i, name) { data.push(i+'_'+name); }) return process(data); }, 'json' ); } //источник данных //вывод данных в выпадающем списке , highlighter: function(item) { var parts = item.split('_'); parts.shift(); return parts.join('_'); } //вывод данных в выпадающем списке //действие, выполняемое при выборе елемента из списка , updater: function(item) { var parts = item.split('_'); var userId = parts.shift(); $.post('getuserdata', {'user_id':userId}, function (user) { $('input[name=email]').val(user.email); $('input[name=phone]').val(user.phone); }, 'json' ); return parts.join('_'); } //действие, выполняемое при выборе елемента из списка } ); </script>
В этом примере производится 2 запроса к БД: 1й выводит имена пользователей и получает id выбранного пользователя, а второй на основании id – запрашивает и выводит в соответствующие поля email и номер телефона выбранного пользователя. При помощи использования разделителя “_” data.push(i+’_’+name); мы в одном запросе получаем два параметра, это оправдано при небольшом количестве данных, таких, как id и имя, остальные данные мы получаем во втором запросе var parts = item.split(‘_’); var userId = parts.shift();.
Ниже 2 экшена на примере фреймворка Kohana с подключенным и настроенным модулем БД и ORM, для чистого PHP необходимо произвести подключение к БД и написание запроса с последующим выводом данных.
public function action_getname() { $users = ORM::factory('user') ->where('name', 'LIKE', '%' . $_POST['name'] . '%') ->find_all() ->as_array('id', 'name'); echo json_encode($users); } public function action_getuserdata() { $user = ORM::factory('user', $_POST['usr_id']); ->as_array('id', 'name'); echo json_encode($user); }
Всевозможные детализации и проверки в данном примере не приводятся для упрощения кода.