簡體   English   中英

輸入時不要顯示jQuery UI Autocomplete

[英]Do not show jQuery UI Autocomplete when typing

我正在使用jQuery UI自動完成功能來顯示文本輸入的自動完成功能。 我希望列表出現時更加保真。 我已經為Click和Double Click制作了觸發器,顯示自動完成(基於用戶是否選擇包含每個觸發器)但我發現無法影響鍵入時是否顯示自動完成。

如何在鍵入時不顯示自動完成(不是由鍵事件觸發)?

回答

function InitialiseAutoCompleteEx(inputId, trigOnClick, trigOnDoubleClick, trigOnType, trigOnCtrlSpace, rawAutoCompleteItems)
{
    var autoCompleteItems = rawAutoCompleteItems.split("|");
    var input = $("#" + inputId);

    input.autocomplete(
        {
            source: autoCompleteItems,
            minLength: 0,
            disabled: true,
            close: function() { $(this).autocomplete("option", "disabled", true); }
        });

    if (trigOnClick)
    {
        input.click(function()
            {
                $(this).autocomplete("option", "disabled", false);
                $(this).autocomplete("search");
            });
    }

    if (trigOnDoubleClick)
    {
        input.dblclick(function()
            {
                $(this).autocomplete("option", "disabled", false);
                $(this).autocomplete("search");
            });
    }

    if (trigOnType)
    {
        input.keydown(function(event)
            {
                var key = String.fromCharCode(event.which);

                if ( /[a-zA-Z0-9]/.test(key) )
                {
                    $(this).autocomplete("option", "disabled", false);
                    $(this).autocomplete("search");
                }
            });
    }

    if (trigOnCtrlSpace)
    {
        input.keydown(function(event)
            {
                if (event.which == 32 && event.ctrlKey)
                {
                    $(this).autocomplete("option", "disabled", false);
                    $(this).autocomplete("search");
                    event.preventDefault();
                }
            });
    }
}

只需使用其disabled選項

$("#field").autocomplete("option", "disabled", true);

 var tags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]; $("#field").autocomplete({ source: function(request, response) { var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i"); response($.grep(tags, function(item) { return matcher.test(item); })); }, disabled: true, }); function disable(shouldDisable) { shouldDisable = JSON.parse(shouldDisable); // Extract boolean from string parameter $("#field").autocomplete("option", "disabled", shouldDisable); $("#field").focus().trigger($.Event("keydown")); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> <input id="field" /> <button onclick="disable(false);">Autocomplete On</button> <button onclick="disable(true);">Autocomplete Off</button> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM