Typeahead and AJAX query doesn't work

Question

I'm trying to get TB Typeahead working with AJAX results and PHP but can't. See this is the code I made for this:

$('#search').typeahead({
    limit: 10,
    minLength: 2,
    source: function() {
        return $.ajax({
            url: $('base').attr('href') + 'index.php?route=product/search/AjaxProductSearch',
            type: "GET",
            data: "search=" + $("#search").val(),
            success: function(result) {
                return result;
            }
        });
    }
});

The result for calling for example with "co" is:

["Combo AMD A4 (14,708.06 BsF)","Combo AMD A8 (17,900.05 BsF)","Combo
Core i3 (17,200.01 BsF)","Combo Core i5 (20,399.95 BsF)","Combo Intel
G465 (13,699.99 BsF)","Combo Intel G630 (15,199.97 BsF)"]

But options aren't showed, why? What is wrong? Also it's possible to add some way to click in options and go to a specific URL?

I also check this post and this other too and finally this other but without results

EDIT Thanks to the amazing help from @dikirill I get this code working partially:

$('#search').typeahead({
    limit: 10,
    minLength: 2,
    source: function(query, process) {
        $.ajax({
            url: $('base').attr('href') + 'index.php?route=product/search/AjaxProductSearch',
            type: "GET",
            data: "search=" + $("#search").val(),
            success: function(result) {
                return process(result.names);
            },
            dataType: 'json'
        });
    },
    updater: function(item) {
        var values = $('#search').data('values');
        alert(values);
        for (var index in values) {
            if (values[index].name == item) {
                location.href = values[index].href;
                break;
            }
        }
        return item;
    }
});

What isn't working? Well I want when I click any element from typeahead result instantaneously I got redirected to the URL associated to that element. See this PHP function is the function that returns values:

public function AjaxProductSearch() {
    $this->load->model('catalog/product');

    if (isset($this->request->get['search'])) {
        $search = $this->request->get['search'];
    } else {
        $search = '';
    }

    $output = array();
    if (isset($this->request->get['search'])) {
        $data = array(
            'filter_name' => $search
        );

        $product_total = $this->model_catalog_product->getTotalProducts($data);
        $results = $this->model_catalog_product->getProducts($data);

        $output = array();
        foreach ($results as $result) {
            $output['names'][] = $result['name'];
            $output['values'][] = array(
                'name' => $result['name'],
                'href' => $this->url->link('product/product', 'product_id=' . $result['product_id'] . $url)
            );
        }
    }
    echo json_encode($output);
}

Then one result returned is for example this one:

{"names":["Combo AMD A4","Combo AMD A8","Combo Core i3","Combo Core i5","Combo Intel G465","Combo Intel G630"],"values":[{"name":"Combo AMD A4","href":"http:\/\/store.devserver\/amd-a4"},{"name":"Combo AMD A8","href":"http:\/\/store.devserver\/amd-a8"},{"name":"Combo Core i3","href":"http:\/\/store.devserver\/intel-corei3"},{"name":"Combo Core i5","href":"http:\/\/store.devserver\/intel-corei5"},{"name":"Combo Intel G465","href":"http:\/\/store.devserver\/intel-g465"},{"name":"Combo Intel G630","href":"http:\/\/store.devserver\/intel-g630"}]}

As you can see I've names which allow me to build the typeahead as must be and the other values is where I get names associated to href. In others words if I pick Combo AMD A4 then I should redirect to href":"http:\/\/store.devserver\/amd-a4 and my code isn't working, what is wrong?

EDIT Live demo is here

dikirill · Accepted Answer · 2013-04-18T16:50:06.260

1

Try my example:

$('#search').typeahead({
    limit: 10,
    minLength: 2,
    source:function (query, process)
        $.ajax({
            url: $('base').attr('href') + 'index.php?route=product/search/AjaxProductSearch',
            type: "GET",
            data: "search=" + $("#search").val(),
            success: function(result) {
                if (typeof result.values != "undefined") {
                    $('#search').data('values', result.values);
                    return process(result.names);
                }
            },
            dataType: 'json'
        });
    },
    updater: function(item) {
        var values = $('#search').data('values');
        for (var index in values) {
            if (values[index].name == item) {
                location.href = values[index].href;
                break;
            }
        }
       return item;
    }
});

Ended up with missing 'dataType'.

edited Apr 18 '13 at 16:50

answered Apr 17 '13 at 18:42

dikirill

1,873
1
19
21

I don't know where things goes :-(, for example you have `$.get(sourceUrl)` this is `$('base').attr('href') + 'index.php?route=product/search/AjaxProductSearch'` in my code? also you say `term:query` this is the value I lookup for example `$("#search").val()`? I get lost, will be fine if you could use your example with vars from my code – Reynier Apr 17 '13 at 18:52
@dirikill nop, doesn't work, options (means dropdown) never is showed also when your code returns JSON with values – Reynier Apr 17 '13 at 19:41
Try to remove 'return' before '$.ajax'. – dikirill Apr 17 '13 at 19:50
the same results, options aren't showed, I'm trying to upload the site to my hosting but it's down now I need to wait until get up again – Reynier Apr 17 '13 at 19:53
I edited my question and added what we was working but the `updater` isn't working, can you take a look? – Reynier Apr 17 '13 at 22:46
Replace your 'source' 'success' with this code: success: function(result) { if (typeof result.values != "undefined") { $('#search').data('values', result.values); return process(result.names); } } – dikirill Apr 18 '13 at 13:16
I get lost again, you mean add `success` to the `typeahead` or you mean change something on the existent code? – Reynier Apr 18 '13 at 13:41
@dikirll excellent man, it works like a charm, many, many thanks for you and for your effort, I learn something new – Reynier Apr 18 '13 at 17:35

Typeahead and AJAX query doesn't work

1 Answers1