Поиск с использованием Jquery Ui Autocmplete

Статей в интернете на эту тему очень, но я все же решил написать свой вариант, своими слова. Первое, что нам будет необходимо сделать, это подключить 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://eddnet.org/search.php", request, function( data, status, xhr ) {
                cache[ term ] = data;
                if ( xhr === lastXhr ) {
                    response( data );
                }
            });
        }
    });
});

Параметр minLength задает минимальное количество символов при котором срабатывает автокомплит. Файл search.php расположенный по адресу http://eddnet.org/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»

Случайные Статьи

Loading…


Количество просмотров :2832

2 Comments

  1. Oleg:

    Правильно модель нужно называть data_model.
    В контроллере обязательно нужно подгрузить модель:
    load->model(‘data_model’);
    $search = $this->data_model->get_update_name(trim(strip_tags($this->input->get(‘term’))));
    $info[‘result’] = $this->Data->pre_json($search);
    ?>
    работоспособность не проверял.

  2. Oleg:

    $this->load->model(‘data_model’);

Оставьте коментарий