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);
    }
});

更新：未捕获TypeError：对象函数（）{return a.apply（c，e.concat（k.call（arguments）））}没有方法'process'

如果我只输入'A'，那么typeahead只显示每个结果的第一个字母（一串A字母）。如果我输入第二个字母，我就什么都看不见了。

我已尝试JSON.parse数据或使用data.options但没有运气。

我做错了什么？

Answer 1

我在Bootstrap 2.2.1的最后一天一直在争夺这个。不管我做了什么，它都行不通。对我来说，我总是得到进程未定义的错误，除非我在进程函数中放置一个断点（可能只是因为FireBug是打开的？）。

无论如何，作为一个补丁，我重新下载了带有typeahead的Bootstrap，从这里得到了typeahead： https://gist.github.com/2712048

并使用此代码：

$(document).ready(function() {
    $('input[name=artist]').typeahead({
        'source': function (typeahead) {
            return $.get('/7d/search-artist.php', { 'artist': typeahead.query }, function (data) {
                return typeahead.process(data);
            });
        },
        'items': 3,
        'minLength': 3
    },'json')
});

我的服务器返回此信息（对于'Bo'）：

["Bo","Bo Burnham","Bo Diddley","Bo Bruce","Bo Carter",
 "Eddie Bo","Bo Bice","Bo Kaspers Orkester","Bo Saris","Bo Ningen"]

当然，现在它忽略了我的minLength，但它会让我度过这一天。希望这会有所帮助。

编辑：在这里找到解决方案： Bootstrap 2.2 Typeahead Issue

使用Bootstrap 2.2.1中包含的typeahead，代码应为：


    $(document).ready(function() {
        $('input[name=artist]').typeahead({
            'source': function (query,typeahead) {
                return $.get('/search-artist.php', { 'artist': encodeURIComponent(query) }, function (data) {
                    return typeahead(data);
                });
            },
            'items': 3,
            'minLength': 3
        },'json')
    });

Answer 2

以下是我使用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 3

$ .post是异步的，因此您无法在其中返回用户。这不会返回任何东西。

Bootstrap 2.2.1 Typeahead

3 个答案: