javascript - Programmatically triggering typeahead.js result display

Question

I am using Twitter's typeahead.js (https://github.com/twitter/typeahead.js/) on an input field which is pre filled from a query string. After loading the page, i'd like to programmatically trigger the display of typeahead results without the user needing to type anything in the form field.

Out of the box, typeahead.js is only triggered if the user manually types something into the input field and i can not find any method in typeahead.js which i could call to trigger the display of results.

Any pointers would be greatly appreciated.

Thanks!

score 51 · Accepted Answer

入力をトリガーすることでそれができるようです。

$(".typeahead").eq(0).val("Uni").trigger("input");

サンプルページでこれをテストしました。

score 15 · Accepted Answer

私のテスト ( fiddleを参照) によると、ドロップダウンを表示するには focus() メソッドが必要です。そう：

theVal = $('.typeahead').val();
$(".typeahead").typeahead('val', '')
$(".typeahead").focus().typeahead('val',theVal).focus();

1 行目では、Typeahead 入力の現在の値を変数theValに代入しています。
2 行目では、先行入力の計算値を単純にリセットします。と
3 行目では、元の値とフォーカスを元に戻しています。これにより、ユーザーが何かを入力したかのように表示される候補ドロップダウンが生成されます。

これは、フォームを送信する前にクライアントが確実に座標を取得できるように、ジオコーディング API 呼び出しからの Bloodhound の提案から選択するようユーザーに強く促すために必要でした。

score 10 · Accepted Answer

$(".typeahead").typeahead('lookup').focus();

入力の既存の値でトリガーします。もちろん、事前に値を変更できます

score 9 · Accepted Answer

バージョン 0.11.1 以降の twitter の先行入力でこの問題を見つけた人には、1 行で解決した方法を次に示します。

$(".typeahead-input").typeahead('val', "cookie")
                     .trigger("input")
                     .typeahead('open');

score 8 · Accepted Answer

Typeahead v0.10.1 の時点で、typeahead の値を変更すると、別のクエリがトリガーされ、ドロップダウンが開きます。

var val = $(".typeahead").typeahead('val');
$(".typeahead").typeahead('val', '');
$(".typeahead").typeahead('val', val);

score 5 · Accepted Answer

私はtwitterのブートストラップタイプアヘッドを使用し、フォーカスすると提案リストが開くことを期待しました。ここでの答えは私にとってはうまくいかなかったので、この簡単なディレクティブを書きました（jqueryが必要です）：

.directive('typeaheadFocusTrigger', function() {
        return {
            limit: 'A',
            link: function(scope, element, attrs) {
                $(element).on('focus', function(e) {
                    var $target = $(e.target);
                    var origVal = $target.eq(0).val();
                    $target.eq(0).val('').trigger('input')
                    .eq(0).val(origVal).trigger('input');
                });
            }
        }
    });

この属性を追加するだけで、フォーカス時にトリガーされます

<input typeahead-focus-trigger typeahead="">

score 3 · Accepted Answer

ソースコードを調べるTypeaheadViewと、要素データのキーの下にオブジェクトが格納されているようtypeaheadです。このTypeaheadViewオブジェクトには内部メソッドがあり_showDropdown、これは focus イベント (およびその他のいくつか) に内部的にバインドされています。

これを行うことはお勧めしませんが、その内部メソッドを手動で呼び出すことができるはずです:

$('#yourTypeaheadElement').data('typeahead')._showDropdown();

または、ページの読み込み時に先行入力要素にフォーカスしようとしただけですか (もちろん、先行入力要素として初期化した後):

// after page loads and yourTypeaheadElement is initialized as a typeahead
$('#yourTypeaheadElement').focus();

score 3 · Accepted Answer

入力タグのクラスに意図的に「typeahead」を入れない限り、これらのどれも機能しません。これを行う必要がないと思われる場合 (機能する必要はありません)、typeahead.js によって入力タグに書き込まれたクラスを使用することをお勧めします。「.tt-input」です。以下は、新しい CSS クラス用に再コード化された、Sam_Butler から引用した例です。これは、最新の typeahead 0.10.5 で機能します。

var theVal = jQuery('.tt-input').val();
jQuery(".tt-input").typeahead('val', 're')
jQuery(".tt-input").focus().typeahead('val',theVal).focus();

score 2 · Accepted Answer

ソースコードを調べたところ、文書化されていない次の方法が見つかりました。

var $myinput = $('#myinput');
$myinput.data('typeahead')._showDropdown()

score 1 · Accepted Answer

これは私にとってはうまくいきました。

$( document ).ready(function() {
    $('#the-basics .typeahead').typeahead({
      hint: false,
      highlight: true,
      minLength: 0
    },
    {
      name: 'states',
      displayKey: 'value',
      source: substringMatcher(states)
    });

    //set a value to input to trigger opening
    $(".typeahead").eq(0).val("a").trigger("input");
    //remove value for end user
    $(".typeahead").eq(0).val("");

});

たとえば、ここを参照してください: http://joshuamaynard.com/sandbox/autocomplete

score 1 · Accepted Answer

他の回答は役に立ちましたが、私の問題は解決しませんでした。このソリューションでは、angular-ui コード自体をカスタマイズする必要はなく、明示的なボタンクリックで結果を取得するためにタイプアヘッドをトリガーすることのみを目的としています。

これを行うには、テキストフィールドを別の (無効な) テキストフィールドの上に重ねる必要がありました。他のものがそこにあることは誰も知りませんが、angular-ui が正しい場所でメニューを起動するには、そこにある必要があります。メニューを正しい場所に表示できないため、非表示フィールドにすることはできません。

以下のディレクティブは、ボタンがこれをトリガーしたときに (トリガーを true に設定することによって)typeaheadTextおよびtypeaheadTrigger変数を監視して、disbled フィールドにデータを入力します。ディレクティブのスコープは分離されているため、渡されたもの以外には依存しません。

directive('typeaheadTrigger', function() {
  return {
    require: ["ngModel"],
    scope: {
      typeaheadText: '=',
      triggerFlag: '='
    },
    link: function(scope, element, attr, ctrls) {
      scope.$watch('triggerFlag', function(value) {
        if (scope.triggerFlag) {
          ctrls[0].$setViewValue(scope.typeaheadText);
          scope.typeaheadText = '';
          scope.triggerFlag = false;
        }
      });
    }
  };
})

コントローラーは、オブジェクト内のトリガー変数とテキストスコープ変数など、いくつかの設定を行います。これはその方法を示しています。理想的には、この全体を別のディレクティブでラップして、詳細を隠しながらアプリケーションで使用できるようにします。

これがプランクです: http://plnkr.co/edit/UYjz6F5ydkMQznkZAlfx?p=preview

score 0 · Accepted Answer

1 つのアイテムが tt-dataset にあるときに、これを使用して手動で選択をトリガーしました。これを追加することは理にかなっています。

$("#mytypeahead").keyup(function (e) {
                var charCode = (typeof e.which === "number") ? e.which : e.keyCode;
                if (charCode == 13) {
                    if ($(this).parent().find(".tt-dataset").children().length == 1) {
                        //This is how we are submitting a single selection on enter key
                        $(this).parent().find(".tt-dataset").children(0).addClass("tt-cursor");
                        var kde = jQuery.Event("keydown");
                        kde.which = 13;
                        $(this).trigger(kde);                           
                    }    
                }                    
            });

javascript - Programmatically triggering typeahead.js result display

17 に答える 17

Related

Reference