Bootstrap 2.2.1 预输入答案

【问题标题】：Bootstrap 2.2.1 TypeaheadBootstrap 2.2.1 预输入
【发布时间】：2012-10-26 11:42:35
【问题描述】：

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

UPDATE: Uncaught TypeError: Object function (){return a.apply(c,e.concat(k.call(arguments)))} has no method 'process'

如果我只输入“A”，那么 typeahead 只会显示每个结果的第一个字母（一堆 A 字母）。如果我输入第二个字母，我就什么也看不见了。

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

我做错了什么？

【问题讨论】：

您实际上是在尝试将 typeahead 转换为允许远程数据源吗？
好的，看看我的回答——我相信我的代码应该能帮到你。

标签： javascript twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

以下是我为使用引导程序的预输入来促进远程数据源所做的工作：

$("#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;

【讨论】：

这给了我“Object a has no method 'process'”指的是 typeahead.process
不应该是Object typeahead has no method 'process'吗？不是，object a？您可以在原始帖子中发布更新后的代码吗？
我关注你，但不是这样，'a' 是我在文本字段中输入的内容。更新了我原来的帖子。
请更新您的服务器端代码，因为您没有输出正确的 JSON - 请参阅我的示例的后半部分（基于 CodeIgniter）。此外，您没有将查询传递给您的控制器，这意味着不会进行任何过滤。
我也遇到了同样的错误TypeError: typeahead.process is not a function。我的控制器返回这个 json [{"value":"UI Design","id":"1"},{"value":"Web technology","id":"2"}]

【解决方案3】：

最后一天我一直在用 Bootstrap 2.2.1 解决这个问题。不管我做什么，它都行不通。对我来说，除非我在进程函数中放置断点（可能只是因为 FireBug 已打开？），否则我总是遇到进程未定义错误。

无论如何，作为一个补丁，我重新下载了 Bootstrap，省略了预输入，从这里得到预输入： 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 中包含的预输入，代码应为：

$(文档).ready(函数() { $('input[name=artist]').typeahead({ '来源'：功能（查询，提前输入）{ return $.get('/search-artist.php', { 'artist': encodeURIComponent(query) }, function (data) { 返回预输入（数据）； }); }, “项目”：3， “最小长度”：3 },'json') });

【讨论】：