Twitter bootstrap typeahea - 値とIDを取得

Question

私はこのデータセットから値とIDを取得しようとします。

1つは簡単だと思いますが、どのようにして2番目の情報を取得できるのかわかりません。

私のサイトでは、この機能を使用しなければならない入力フィールドの数が動的に変化することがあります。

これは、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形式の1以上を取得するために、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

ザッツこの

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

リンケものですデータセットの値を変換するには、結果セットを変換してキーと値のペアを返す必要があります。下の例では、responseは受け取ったJSON文字列です。次に必要な値をすべて取得します。

まだTwitterの-先行入力 を使用しているすべての人に優しいリマインダーは、それはもはや維持されているように、このリポジトリから離れて移動しないことです。 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例です。