Question

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

Gettin认为很容易，但我不知道如何获得第二个信息？

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

这是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示例，可帮助您入门。

Twitter bootstrap typeahea - 获取价值和身份

1 个答案: