自动打开 jQuery UI 自动聚焦

Auto open jQuery UI autocomoplete on focus

提问人:gardarvalur 提问时间:5/17/2023 更新时间:5/17/2023 访问量:20

问:

我希望自动完成在输入焦点上自动打开下拉列表。

这是我的例子:

$(".tag-input").autocomplete({
            source: tagInputOptions,
            sortResults: true,
            select: function (event, ui) {
                var selectedValue = ui.item.value;
                if (selectedValue !== "") {
                    $(this).next(".tag-input-button").click();
                }
                return false;
            }
        }).keydown(function(event) {
            if (event.originalEvent.keyCode === 13) {
                // Enter key pressed
                event.preventDefault();
                var selectedValue = $(this).val();
                if(selectedValue !== "") {
                    $(this).next(".tag-input-button").click();
                }
            }
        }).on("focus", function () {
            $(this).autocomplete("search", " ");
        });

我试过触发搜索让它打开,但它没有打开:$(this).autocomplete("search", " ");

我以为它会以未过滤的列表打开。

我实际上不会打开,也没有错误。

jQuery 事件 jquery-ui-autocomplete

评论


答:

1赞 2ju2 5/17/2023 #1

像这样添加 minLength 和 focus 函数。

var tagInputOptions = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
$(".tag-input").autocomplete({
            source: tagInputOptions,
            sortResults: true,
            minLength : 0,              //add this line            
        }).keydown(function(event) {
            if (event.originalEvent.keyCode === 13) {
                // Enter key pressed
                event.preventDefault();
                var selectedValue = $(this).val();
                if(selectedValue !== "") {
                    $(this).next(".tag-input-button").click();
                }
            }
        }).focus(function() {         //add this line 
            $(this).autocomplete("search", $(this).val());
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" class="tag-input">
</div>

评论

0赞 gardarvalur 5/17/2023
谢谢!这很完美。我尝试了很多版本,甚至尝试过问 chatGPT ;)