Довольно часто при разработке проекта требуется создать поле поиска или ввода данных, в которое передаются данные автоподстановки. Например, поиск названия штата по нескольким символам. Этот пример со статическими данными можно найти на странице проекта Twitter Bootstrap – он прост и информативен:

typeahead

Код примера:

<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);
}

Всевозможные детализации и проверки в данном примере не приводятся для упрощения кода.