Bootstrap 2.2.1 Typeahead

Question

PHP，返回JSON编码的数组

$this->load->model('car_model', 'cars');
$result = $this->cars->searchBrand($this->input->post('query'));
$this->output->set_status_header(200);
$this->output->set_header('Content-type: application/json');
$output = array();
foreach($result as $r)
    $output['options'][$r->brandID] = $r->brandName;
print json_encode($output);

输出：{"options":{"9":"Audi","10":"Austin","11":"Austin Healey"}}

JS更新：

$(".searchcarBrands").typeahead({
    source: function(query, typeahead) {
        $.ajax({
            url: site_url + '/cars/search_brand/'+query,
            success: function(data) {
                typeahead.process(data);
            },
            dataType: "json"
        });
    },
    onselect: function(item) {
        $("#someID").val(item.id);
    }
});

更新:未捕获的函数: Object TypeError(){a.apply a.apply(c，e.concat(k.call(k.call)}没有方法'process‘

如果我只输入'A‘，则typeahead只显示每个结果的第一个字母(一串A字母)。如果我输入第二个字母，我什么也看不到。

我尝试过对数据使用JSON.parse或使用data.options，但没有成功。

我做错了什么？

Answer 1

下面是我用bootstrap的typeahead来简化远程数据源的方法：

$("#search").typeahead({

    source: function(typeahead, query) {

        $.ajax({

            url: "<?php echo base_url();?>customers/search/"+query,
            success: function(data) {

                typeahead.process(data);
            },
            dataType: "json"
        });
    },
    onselect: function(item) {

        $("#someID").val(item.id);
    }
});

然后，您只需要确保JSON编码的数组包含标签的value索引和id字段，以便在之后设置隐藏的id，如下所示：

$this->load->model('car_model', 'cars');
$brands = $this->cars->searchBrand($this->uri->segment(4));
$output = array();
foreach($brands->result() as $r) {

    $item['value'] = $r->brandName;
    $item['id']    = $r->brandID;
    $output[] = $item;
}
echo json_encode($output);
exit;

Answer 2

$.post是异步的，所以你不能在其中返回。这不会返回任何内容。