автозаполнение формы поиска

Question

Привет, я новичок и ищу способ получить окно поиска с автозаполнением, как в Google.

Я искал, и лучшая перспектива, которую я нашел, кажется http://www.pengoworks.com/workshop/jquery/autocomplete.htm, которую я нашел на форуме. Парень, который предложил это, говорит, что он использует это с http://code.google.com/p/searchable-behaviour-for-cakephp/, который мертв, потому что мне удалось установить searchable в моей последней попытке выяснить cakephp.

Дело в том, что я раньше не пользовался большим количеством javascript, и меня немного смущает, что именно я собираюсь делать. В документации с кодами автозаполнения нет подробностей, которые я могу понять.

Если мы предположим, что мне удастся правильно установить поведение для поиска, может ли какой-нибудь добрый человек объяснить мне, как я могу заставить работать автозаполнение?

В нем сказано просто использовать:

$("selector").autocomplete(url [, options]);

Например:

$("#input_box").autocomplete("autocomplete_ajax.cfm");

Autocomplete ожидает, что элемент ввода с идентификатором "input_box" существует. Когда пользователь начинает вводить данные в поле ввода, автозаполнение запросит autocomplete_ajax.cfm с параметром GET с именем q

это бит, который я не понимаю. Где я должен это положить? И как только я положил его куда-нибудь, нужно ли мне назвать один из моих входов "input_box"?

спасибо заранее.

Answer 1

Есть три шага:

1) создайте полностью нормальную форму с полем ввода, используя Html помощник в вашем представлении:

// app/views/foo_bars/search.ctp
<?php
echo $this->Form->create('FooBar');
echo $this->Form->input('field');
echo $this->Form->end('Submit');
?>

2) Запустить автозаполнение jquery:

// app/views/foo_bars/search.ctp
<?php
echo $this->Html->scriptBlock(
    .'$("#FooBarField").autocomplete({'
        .'source:"/foo_bars/find",'
        .'delay: 100,'
        .'select:function(event,ui){$(this).parent().parent().children("input").val(ui.item.id);},'
        .'open:function(event,ui){$(this).parent().parent().children("input").val(0);}'
    .'});'
    array('inline' => false));
?>

3) Запросите базу данных через контроллер, чтобы получить возможные значения:

// app/controllers/foo_bars_controller.php
<?php
public function find() {
    if ($this->RequestHandler->isAjax()) {
        $this->autoLayout = false;
        $this->autoRender = false;
        $this->FooBar->recursive = -1;
        $results = $this->FooBar->find('all', array('fields' => array('id', 'name'), 'conditions' => array('name LIKE "%'.$_GET['term'].'%"')));
        $response = array();
        $i = 0;
        foreach($results as $result){
            $response[$i]['value'] = $result['FooBar']['name'];
            $response[$i]['id'] = $result['FooBar']['id'];
            $i++;
        }
        echo json_encode($response);
    }
}
?>

Answer 2

echo $ this-> Html-> scriptBlock (

$ ( "# FooBarField"). Автозаполнения ({ '

    .'source:"/Search/find",'
    .'delay: 100,'
    .'select:function(event,ui){$(this).parent().parent().children("input").val(ui.item.id);},'
    .'open:function(event,ui){$(this).parent().parent().children("input").val(0);}'

.. '});

array('inline' => false));