6

ここに見られるように、私は現在、自分のウェブサイトに twitter typeahead プラグインを使用しています。

リストが開き、選択すると、非表示の入力フィールドが選択の ID で更新されます。ユーザーが入力した内容で ID が機能するようにするには、選択を強制する先行入力が必要です。値が変更された場合、有効な選択が行われるまで ID を削除する必要があります。選択せずにボックスが閉じた場合、両方を空にする必要があります。

これまでのところ、私は持っています:

$('.cp').typeahead({                              
  name: 'nom',                                                          
  prefetch: 'ajax_recherche_ville.php',                                         
  limit: 50                                                    
});

$('.cp').bind('typeahead:selected', function(obj, datum) {        
        $('input:hidden[name=ville_id]').val(datum.id); 
});

このコードに適用される強制選択の例が見つかりません。特に、プリフェッチ メソッドを使用しているためです。したがって、値がリストにあるかどうかを検証することはできません。少なくとも、方法はまだわかりません。これを意図したとおりに機能させるにはどうすればよいですか?

4

2 に答える 2

1

あなたのコードは正しい方向に進んでいると思います。変更および修正されたテキストが引き続き有効であることを保証するために、いくつかの拡張機能を追加できます

$sourceSelect = @$el.find('[name="source_venue_name"]')
$sourceSelect.typeahead [
  {
    valueKey: 'name'
    remote:
      url: '/apis/venues?q=%QUERY'
    ]
  }
]

# hidden id
$sourceId = @$el.find('[name="source_venue_id"]')

$sourceSelect.on 'typeahead:selected', (e, item) =>
  # set hidden id on selection
  $sourceId.val item.id
  # remember selection
  $sourceSelect.attr 'data-name', item.name
  $sourceSelect.attr 'data-id', item.id

$sourceSelect.on 'change', () =>
  # if changed value is same as selected text
  if $sourceSelect.val() is $sourceSelect.attr 'data-name'
    $sourceId.val $sourceSelect.attr 'data-id'
  else # changed to be invalid
    $sourceId.val ''

PS: Typeahead はすべてのユースケースで機能クリープを回避したいと考えてい ます https://github.com/twitter/typeahead.js/issues/368

于 2013-08-23T14:02:58.773 に答える
1

これに対する直接的な解決策はわかりませんが、回避策を提供できると思います。

イベントで非表示の入力をクリアできます。後でイベントchange()で更新されます。typeahead:selected

$('.cp').typeahead({                              
    name: 'nom',                                                          
    prefetch: 'ajax_recherche_ville.php',                                         
    limit: 50                                                    
}).change(function () {
     $('input[name=ville_id]').val(''); // don't use :hidden since it slow down performance and doesn't do anything special, I suppose the input with name ville_id is unique
}).bind('typeahead:selected', function(obj, datum) {        
     $('input[name=ville_id]').val(datum.id); 
});

この方法の弱点は次のとおりです。

  • ユーザーがオートコンプリートをトリガーしない何かを入力した場合、先行入力はクリアされません
  • typeahead:selected非表示の入力を入力するには、ユーザーはオートコンプリート ドロップダウン (トリガー) をクリックする必要があります。

デモ: http://jsfiddle.net/hieuh25/zz85q/

それが役に立てば幸い。

于 2013-08-05T10:03:00.543 に答える