Twitter bootstrap typeahead - 获取值和 id

Question

我正在尝试从此数据集中获取值和 id。

获取一件事很容易，但我不知道如何获取第二个信息？

重要的是要知道，在我的网站中可以有动态数量的输入字段，它们都必须使用此功能。

这是JS代码

// Datas
  var datas = new Bloodhound({
      datumTokenizer: function(d) { return d.tokens; },
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
          url: 'autocomplete.php?s=1&li=5&query=%QUERY',
          wildcard: '%QUERY' }
    });

$('#orga_id').typeahead(null, 
        {
          name: 'orga_id_autosuggest',
          displayKey: 'desc',
      input: 'value',
      highlight: true,
      hint: false,
      limit: 5,
      minLength: 2,
      wildcard: '%QUERY',
      source: datas.ttAdapter(),
      templates: {
        suggestion: Handlebars.compile([
          '<div class=\"media\">',
                '<div class=\"pull-left\">',
                    '<div class=\"media-object\">',
                        '<img src=\"{{img}}\" width=\"50\" height=\"50\"/>',
                    '</div>',
                '</div>',
                '<div class=\"media-body\">',
                    '<h4 class=\"media-heading\">{{value}}</h4>',
                    '<p>{{desc}}</p>',
                '</div>',
          '</div>',
        ].join(''))
      }
    });

在 html 表单中是这样的

<input type="text" name="3_orga_name[]" class="form-control autosugbtn" value="" /> 
<input type="hidden" name="3_orga_id[]" value="">

这就是PHP文件的反馈

$results[] = array(
          "value" => $res['DS'],
          "desc" => $res['ORG_NAME'],
          "img" => "http://lorempixel.com/50/50/?" . (rand(1, 10000) . rand(1, 10000)),
          "tokens" => array($query, $query . rand(1, 10))
        );

Answer 1

要从数据集中获取多个值，您必须转换结果集并返回一个键值对。因此，在下面的示例中，

response

是我收到的 JSON 字符串，然后我获得了所需的所有值。

对仍在使用 Twitter-Typeahead 的每个人的友好提醒 是离开这个存储库，因为它不再被维护。 相反，将自己重定向到 corejavascript/typeahead.js 这是 原始存储库的一个分支，并且是同一作者（@JakeHarding） 维护这个存储库。

我使用的是v0.11。

HTML

<div id="prefetch">
  <input class="typeahead" type="text" placeholder="Countries">
</div>

JS

    var tags = new Bloodhound({
        datumTokenizer: function(datum) {
            return Bloodhound.tokenizers.whitespace(datum.name);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: 'http://www.yourwebsite.com/js/data.json',
            cache: false,
            transform: function(response) {
                return $.map(response, function (tag) {
                    return {
                        name: tag.tagName,
                        id: tag.tagId
                    }
                });
            }
        }
    });

    $('#prefetch .typeahead').typeahead({
        minLength: 3,
        highlight: true
    }, {
        name: 'tags-dataset',
        source: tags,
        display: 'name',
        templates: {
            suggestion: function (data) {
                return '<p><strong>' + data.id + '</strong> - ' + data.name + '</p>';
            }
        }
    })
    .bind('typeahead:select', function (ev, suggestion) {
        console.log(ev);
        console.log(suggestion);
        $('#your-id').attr('value', ev.id);
    });

这是一个可以帮助您入门的 JSFIDDLE 示例。