Довольно часто при разработке проекта требуется создать поле поиска или ввода данных, в которое передаются данные автоподстановки. Например, поиск названия штата по нескольким символам. Этот пример со статическими данными можно найти на странице проекта 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);
}
Всевозможные детализации и проверки в данном примере не приводятся для упрощения кода.