web-dev-qa-db-ja.com

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

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

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

javascripttwitter-bootstrap-3typeahead.js
29
César García Tapia

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

注：

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

15
César García Tapia

10.2を簡単に修正して、「基本」の例を作成しました ここにあります フォーカスに表示します。

mixin _onFocusを変更しました（1459行目）。

_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();
},

ほとんど公式ではありませんが、仕事は完了しました。

11
Scottie

先行入力ソースファイルを変更せずにこれを行う方法があります。次の2つのことを行う必要があります-minlengthを0に設定し、フォーカスイベントのイベントハンドラーを追加します。Twitterページの最初の例（ https://Twitter.github io/typeahead.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検索エンジンでは機能しません。

3
vanval

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

先行入力を作成した後：

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

MinLengthを0に設定するだけです：

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

先行入力が作成されると、minLengthオプションは強制的に1になりますが、作成後に設定でき、完全に機能します。

2
Robert

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
    });
2
Josh Dean

Typeahead v.0.11.1では、他の回答で参照されているパッチが適用されています。オプションでこれを達成できます：

minLength: 0

キーボードまたはマウスフォーカスで動作します。コードの変更や新しいイベントは必要ありません。

1
Jonathan Lidbeck

別のオプションは、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

0
Snekse