Статей в интернете на эту тему очень, но я все же решил написать свой вариант, своими слова. Первое, что нам будет необходимо сделать, это подключить 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»