bootstrap typeahead ajax从数据中选择值 [英] bootstrap typeahead ajax select value from data

问题描述

我正在使用 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应该是这样的:

And here is my problem the VAL and NAME the typeahead is expecting should be like this:

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

那么，如何为我的预输入功能(USER.name + User.id)添加额外的级别?我不知道该使用什么(){} []?

So how do I add the extra level to my typeahead function (The USER.name + User.id)? I have no idea what to use (){}[]?

如何确定报价?提前输入不接受json输出.我在某处读取到我的输出是正确的json.我在这里想念什么吗?

How to fix the quotes? The typeahead does not accept the json output as it is. I read somewhere that my output is correct json. Am I missing something here?

推荐答案

由@建议的要点 RuslanasBalčiūnas
这就是我最终得到的:

Following the gist suggested by @RuslanasBalčiūnas
Here is what I ended up with:

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

这篇关于bootstrap typeahead ajax从数据中选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！