javascript - Twitter Typeahead.js: クリック/フォーカス時にすべてのオプションを表示

Question

オートコンプリートテキスト入力で Typeahead.js を使用していますが、すばらしいです。ただし、入力がフォーカスされたときに、利用可能なすべてのオプションを含むドロップダウンメニューをアクティブにする必要があります。私が見たすべての可能な解決策には、入力を何らかの値で初期化することが含まれますが、すべてのオプションを表示する必要があります。

どうすればこれを達成できますか？

score 26 · Accepted Answer

「minLength: 0 だけで十分です」という回答はすべて真実ではありません。

「すぐに使用できる」Typeahead v0.11.1 では minLength を 0 に設定する必要がありますが、すぐに使用できる Bloodhound エンジンを使用している場合は、必ず設定する必要があります。

identify: function(obj) { return obj.team; },

あなたのブラッドハウンドオブジェクトに..

また、ブラッドハウンドに協力するように指示する「空のクエリ」を処理する「仲介者」機能も必要です。

function nflTeamsWithDefaults(q, sync) {
  if (q === '') {
    sync(nflTeams.all()); // This is the only change needed to get 'ALL' items as the defaults
  } else {
    nflTeams.search(q, sync);
  }
}

ここで完全な例を見ることができます..

var nflTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) { return obj.team; },
  prefetch: '../data/nfl.json'
});

function nflTeamsWithDefaults(q, sync) {
  if (q === '') {
    sync(nflTeams.all()); // This is the only change needed to get 'ALL' items as the defaults
  }

  else {
    nflTeams.search(q, sync);
  }
}

$('#default-suggestions .typeahead').typeahead({
  minLength: 0,
  highlight: true
},
{
  name: 'nfl-teams',
  display: 'team',
  source: nflTeamsWithDefaults
});

より具体的には、.get() から .all() への単純な変更を加えた次のアドレスで、フォーカスの例に関する公式の TWITTER TYPEAHEAD のデフォルトの提案を確認できます (上記または下記を参照)。

http://twitter.github.io/typeahead.js/examples/#default-suggestions

...この情報を見つけるのに時間がかかったので、これが誰かの役に立てば幸いです（すべてのバグレポートをたどり、.all（）メソッドを見つけるために実験して見つけました）...

score 14 · Accepted Answer

オプションを使用する必要がありますminLength: 0

ノート：

この問題を解決したプルリクエストがあります

score 11 · Accepted Answer

ここにある「基本」の例をフォーカスして表示するように、10.2 に簡単な変更を加えました。

mixin _onFocus (1459行目) FROM:

_onFocused: function onFocused() {
    this.isActivated = true;
    this.dropdown.open();
},

に：

_onFocused: function onFocused() {
    this.isActivated = true;
    var val = this.input.getInputValue(); 
    var query = Input.normalizeQuery(val);
    this.dropdown.update(query);
    this.dropdown.open();
},

それはほとんど公式ではありませんが、それは仕事を成し遂げました.

score 3 · Accepted Answer

現在、先行入力ソースファイルを変更せずにこれを行う方法があります。minlength を 0 に設定し、フォーカスイベントのイベントハンドラーを追加するという 2 つのことを行う必要があります。 js/examples/ ) - typeahead.js と jquery-ui.js の場所が正しいことを確認してください。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="typeahead.js"></script>
<script src="jquery-ui.js"></script>
   <script>
   $(function(){
var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substrRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        // the typeahead jQuery plugin expects suggestions to a
        // JavaScript object, refer to typeahead docs for more info
        matches.push({ value: str });
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('.typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 0
},
{
  name: 'states',
  displayKey: 'value',
  source: substringMatcher(states)
});
 $('.typeahead').on( 'focus', function() {
          if($(this).val() === '') // you can also check for minLength
              $(this).data().ttTypeahead.input.trigger('queryChanged', '');
      });
});
   </script>
    </head>
<body>
  <input class="typeahead" type="text" placeholder="States of USA">
</div>

</body>
</html>

これが 0.10.5 で動作することを確認しました。注: Bloodhound の queryTokenizer は文字を想定しているため、これは Bloodhound 検索エンジンでは機能しないことがわかりました。

score 3 · Accepted Answer

0.10.4 の使用

空のクエリのすべての結果を返すには、bloodhound.js の 450 行目に次を追加します。

     if (query == "") { return that.datums; }

フォーカス時に一致をトリガーするには、フォーカス時に入力でキーダウンイベントをトリガーします

     $(input_element).on("click", function () {
        ev = $.Event("keydown")
        ev.keyCode = ev.which = 40
        $(this).trigger(ev)
        return true
    });

score 2 · Accepted Answer

ソースを変更せずにこれを行う簡単な方法があります。これが最初に回答されてからソースが変更された可能性がありますが、念のためにここに置く価値があると思いました。

タイプアヘッドを作成した後:

var $element = $('#myTextElement');
$element.typeahead({ source: ['Billy', 'Brenda', 'Brian', 'Bobby'] });

minLength を 0 に設定するだけです。

$element.data('typeahead').options.minLength = 0;

minLength オプションは、タイプアヘッドの作成時に強制的に 1 に設定されますが、作成後に設定することができ、完全に機能します。

score 1 · Accepted Answer

この動作を実現する最も簡単な方法は、minLinegth をゼロに設定し、プリフェッチプロパティを設定することです。ローカルの JSON ソースを設定する代わりに、クエリパラメータなしで検索 URL を入力します。

let baseUrl = 'some-url.com',
    url = baseUrl + '?search=%QUERY';

...

$el.typeahead({
    minLength: 0,
    highlight: true,
    prefetch: baseUrl
}, {
    ...
});

score 0 · Accepted Answer

もう 1 つのオプションは、Typeahead の非公開 API を使用することです。完全な Typeahead オブジェクトは、jQuery のdataメソッドを通じて利用できます。

var _typeaheadElem = $('#myInput').find('.typeahead');
var _typeahead = _typeaheadElem.data('ttTypeahead');

_typeaheadElem.focus(function() {
    /* WARNING: This is hackery abusing non-public Typeahead APIs */
    if (_typeaheadElem.val() === "") {
        var input = _typeahead.input; //Reference to the TA Input class
        //Set the component's current query to something !== input.
        input.query = "Recent People";
        input._onInput("");
    }
});

v0.10.2 で動作するその他のコードを参照してください http://pastebin.com/adWHFupF

これは PR 719 にリンクされています https://github.com/twitter/typeahead.js/pull/719

javascript - Twitter Typeahead.js: クリック/フォーカス時にすべてのオプションを表示

9 に答える 9

Related

Reference