2017-12-08 1 views
0

selectizejsに問題があり、選択されているアクティブなオプションの機能です。selectizejsはアクティブなオプションを設定します

たとえば、良い例がselectizejsのgithub repoの"Performance" exampleです。クローンしてロードすると、私が説明しようとしていることが分かります。

何か入力を開始すると、Selectizeは最初のオプションをactiveに設定し、入力するとその項目がリストから除外されるとリストから消えるまでアクティブになります。何が起こるかは、大きなグループ(オプションが入力の下のdiv内で実際にスクロールされている場合)の場合、スクロールされたdivは、潜在的に100の異なるオプションと一致するときに最初のオプションを選択せず​​、 divを最初のオプションに戻す。

私は怠惰なので、私はこれを説明するjsfiddleをリンクしていません。むしろ私は彼らのパフォーマンスの例を指しています。この例で私が何を話しているかを実証する方法は次のとおりです。あなたはcaaに入力して(第2いずれかを選択するために)押し下げた場合、あなたは、リストの一番下にアクティブなオプションの秋を参照してくださいよcaため削除押してください。私が望むのは、人が手紙を入力するたびに、リストが更新されるたびに常に最初のオプションが選択されるということです。レポのコード例は次のとおりです。

var letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUV'; 
var options = []; 
for (var i = 0; i < 25000; i++) { 
    var title = []; 
    for (var j = 0; j < 8; j++) { 
     title.push(letters.charAt(Math.round((letters.length - 1) * Math.random()))); 
    } 
    options.push({ 
     id: i, 
     title: title.join('') 
    }); 
} 
$('#select-junk').selectize({ 
    maxItems: null, 
    maxOptions: 100, 
    valueField: 'id', 
    labelField: 'title', 
    searchField: 'title', 
    sortField: 'title', 
    options: options, 
    create: false 
}); 

詳細は不明ですか?

 onType: function() { 
      //console.log(this.$dropdown); 
      var $options = $('.option', this.$dropdown); 
      $options.each(function() { 
       $(this).removeClass('active'); 
      }); 
      $($options[0]).addClass('active'); 
      $('.selectize-dropdown-content', this.$dropdown).scrollTop(0); 
      this.setValue($($options[0]).text()); 
     } 

これは、私はそれが最初のものであることにアクティブなオプションを強制的に先行私にアクティブな項目を選択し、入力したプッシュするときを除き、大部分の作品:私は何をしようとしたことは、これを設定するには、以下です。プラグインを掘り下げてカスタマイズするのではなく、これを迅速に行う方法はありますか?あなたのご意見ありがとうございます!

答えて

0

私は将来的に他の誰かのためにそれを考え出しました。プラグインを分析した後、私はsetActiveOptionを発見し、これは動作します:

 onType: function() { 
      var $options = $('.option', this.$dropdown); 
      this.setActiveOption($($options[0])); 
     } 

が最初の要素へのアクティブなオプションを設定します。

関連する問題