【问题标题】:bootstrap typeahead ajax select value from databootstrap typeahead ajax 从数据中选择值
【发布时间】:2012-08-06 21:49:20
【问题描述】:

我正在使用https://github.com/tcrosen/twitter-bootstrap-typeahead/blob/master/demo/js/demo.js

我的电话:

$('#SearchUser').typeahead({
                ajax: { 
                    url: '/users/ajax_finduser', 
                        triggerLength: 3, 
                        timeout: 300,
                        method: 'post',

                },
                display: 'name',
                val: 'id',
                itemSelected: updateID
            });

我的新输出:

[
   {"id":"5","name":"Som name"},
   {"id":"6","name":"Another name"}
]

这是我的问题,预先输入的 VAL 和 NAME 应该是这样的:

[
    { id: 1, name: 'Some users name' },
    { id: 2, name: 'Another users name' }
]

那么,如何将额外级别添加到我的预输入函数(USER.name + User.id)?我不知道该用什么 (){}[]?

如何修正引号? typeahead 不接受原样的 json 输出。我在某处读到我的输出是正确的 json。我在这里遗漏了什么吗?

【问题讨论】:

  • 快速浏览一下插件,不会发生。你应该考虑修改你的输出。
  • Okei.. 我修改了输出。但现在有一个引号问题..有什么建议吗?或者有另一个我可以使用的预先输入脚本建议?
  • 对我来说似乎工作得很好:jsfiddle。你有错误,还是什么?但是如果你想删除数字周围的引号,你的服务器端输出应该有某种数字解析。
  • 我通过更改插件来处理它。我是怎么做到的:whatswhat.no/development/framework/cakephp-2/…
  • 这个Gist 展示了如何使用未经修改的 Twitter Bootstrap 预输入插件来填充 id。

标签: jquery json twitter-bootstrap typeahead


【解决方案1】:

遵循@RuslanasBalčiūnas 建议的gist
这是我最终得到的结果:

autosep = '####';
$('.autocomplete').typeahead({
    minLength: 3
  , source: function (query, process) {
        if (!finished) {
            return;
        }
        finished = false;
        return $.get(
            'the_action'
          , the_params
          , function (response) {
                var data = new Array(); 
                for (var i in response) {
                    data.push(
                        response[i]['id']
                      + autosep
                      + response[i]['label']
                    );
                }
                finished = true;
                return process(data);
            }
        );
    }
  , highlighter: function(item) {
        var parts = item.split(autosep);
        parts.shift();
        return parts.join(autosep);
    }
  , updater: function(item) {
        var parts = item.split(autosep);
        $('#the_id').val(parts.shift());
        return parts.join(autosep);
    }
});

【讨论】:

  • 这似乎对我不起作用。我删除了“来源”部分,因为我的选择在页面中是硬编码的。我仍然在建议中看到####。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-01-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多