Статей в интернете на эту тему очень, но я все же решил написать свой вариант, своими слова. Первое, что нам будет необходимо сделать, это подключить jQuery и jQuery UI. Для этого, качаем их отсюда и отсюда. Скачивать jQuery Ui полностью или только виджет Autocomlete это дело ваше.
Теперь можно подключить скачанное:
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script>
Далее сам скрипт Autocomplite :
$(function() { var cache = {}, lastXhr; $( "#autocomplete" ).autocomplete({ minLength: 1, source: function( request, response ) { var term = request.term; if ( term in cache ) { response( cache[ term ] ); return; }lastXhr = $.getJSON( "http://teaseo.ru/search.php", request, function( data, status, xhr ) { cache[ term ] = data; if ( xhr === lastXhr ) { response( data ); } }); } }); });
Параметр minLength задает минимальное количество символов при котором срабатывает автокомплит. Файл search.php расположенный по адресу http://teaseo.ru/search.php должен выдавать предварительные результаты поиска в формате json. Как пример, файл search.php:
<?php function get_update_date($search) { $query = "SELECT name FROM table WHERE name LIKE ".$search."%'"; $rt = mysql_query($query); while($nt = mysql_fetch_array($rt)){ $new[] = $nt['name']; } return $new; } function prep_json($array) { foreach($array as $key => $val){ $new[$key]['label'] = $val; $new[$key]['id'] = $key; $new[$key]['value'] = $val; } return $new; } if($_GET('term')){ echo json_encode(prep_json(get_update_date(trim(strip_tags($_GET('term')))))); } ?>
Пример для Codeigniter 2.0.X. И так, в модель Data добавляем две следующие функции:
<?php function get_update_name($name = '') { $this->db->select('name'); $this->db->like('name',$name,'after'); $query = $this->db->get('table'); return $query->result_array(); } function pre_json($array) { foreach($array as $key => $val){ $new[$key]['label'] = $val['name']; $new[$key]['id'] = $key; $new[$key]['value'] = $val['name']; } return $new; } ?>
В контроллере
<?ph $search = $this->Data->get_update_name(trim(strip_tags($this->input->get('term')))); $info['result'] = $this->Data->pre_json($search); ?>
И в view :
<?php echo json_encode($result); ?>
И не забываем присвоить форме id =»autocomplete»