web-dev-qa-db-ja.com

jQueryUIでオートコンプリート「選択」イベントを手動でトリガーするにはどうすればよいですか？

私はjQueryUIオートコンプリートを使用していますが、selectイベントにマップされた関数があります、例えば：

$("#someId").autocomplete({
    source: someData,
    select: function (event, ui) { ... },
    focus: function (event, ui) { ... }
});

特別な場合があります：ユーザーがオートコンプリートドロップダウンの項目に焦点を合わせた（しかし選択していない）ため、別の機能から手動で選択イベントをトリガーする必要があります。これは可能ですか？もしそうなら、どのように？

jqueryjquery-uijquery-ui-autocomplete
32
Jon Lemmon

ここに私のために働いたものがあります：

$(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:$(this).val()}});
40
temuri

できること：

$("#someId").trigger("autocompleteselect");
9
Nicola Peluchetti

JQueryチームがユニットテストで行うのと同じ方法で実行できます- this answerを参照

6
Rune Vejen Petersen

次の関数を呼び出すだけです

setAutocomplete("#txt_User_Name","rohit");

function setAutocomplete(autocompleteId,valuetoset)
    {
        $(autocompleteId).val(valuetoset);
        $(autocompleteId).autocomplete("search", valuetoset);
        var list = $(autocompleteId).autocomplete("widget");
        $(list[0].children[0]).click();
    }
3
Rohit More

1ラインソリューション

$('.ui-menu-item .ui-corner-all:contains(\"123")').autocomplete({autoFocus:true}).mouseenter().click()
3
cegprakash

特に何かの検索をトリガーする場合：

$('#search-term').autocomplete('search', 'searching term');

あるいは単に

$('#search-term').autocomplete('search');

$('#search-term').autocomplete({
    ...
    minLength: 0, // with this setting
    ...
});
3
Alliswell
$('#someId').data('uiAutocomplete')._trigger('select');
3
kayz1

外から：

$($('#someId').data('autocomplete').menu.active).find('a').trigger('click');

「オープン」オートコンプリートイベント内から水平矢印キーを押してトリガーを選択するように設定する方法の例：

$('#someId').autocomplete({
    open: function(event, ui) {
        $(this).keydown(function(e){
            /* horizontal keys */
            if (e.keyCode == 37 || e.keyCode == 39) {
               $($(this).data('autocomplete').menu.active).find('a').trigger('click');
            }
        });
    }
});

残念ながら、「成功」とマークされたこれを解決する素敵な方法は、クロム140.0.835.200のアプリでは機能しませんでした

1
palmic

とても簡単な方法を見つけました。上記の回答はうまくいきませんでした。

私の入力定義：

<div class="search_box">
<input type="text" class="inp disabled" id="search-user-id" placeholder="Search by user name or email" />
</div>

オートコンプリートの定義：

$('#search-user-id').autocomplete({
    minChars: 3,
    paramName: 'searchTerm',
    deferRequestBy: 200, // This is to avoid js error on fast typing
    serviceUrl: '${pageContext.request.contextPath}/settings/reset/psw/query',
    type: 'POST',
    onSelect : function(suggestion) {
        showUserData(suggestion.dto);
    }, 
    onSearchError: function (query, jqXHR, textStatus, errorThrown) {
        $('.cev-error-fields.reset-password').find('.error_msg').text(errorThrown).show().fadeOut(7000);
    }
});

トリガー：他のページで定義されているAjaxからトリガーしているので、簡単にするためにここにAjaxを配置しません。 Ajaxレスポンス内で、次のようにトリガーします。

        $('#search-user-id').val(username);
        $('#search-user-id').focus();

動いた。

0
lauer