Question

＆＃13;

 var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"];
    
    $("#test").autocomplete({
        minLength: 0,
        source: availableTags,
        autoFocus: true,
        select: function (event, ui) {
            if (ui.item) {
                event.preventDefault();
                $(this).val(ui.item.label);
            }
        },
        open: function (event, ui) {
            var menu = $(this).data("uiAutocomplete").menu;
            var items = $('li', menu.element);

            for (var i = 0; i < items.length; i++) {
                if (items.eq(i).text().startsWith($(this).val())) {
                    menu.focus(null, items.eq(i));
                    break;
                }
            }
        },
        focus: function (event, ui) {
            event.preventDefault();
            if ($(this).val() == "" && !event.keyCode) {
                //debugger;
                $('.ui-menu-item a').removeClass('ui-state-focus');
            }
            else {            
                //$(this).data("uiAutocomplete").menu.element.children().first().focus();
            }
        }
    }).on("focus", function () {
        $(this).autocomplete("search", "");
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label for="test" class="col-md-3 col-lg-3 control-label"></label>
    <div class="col-md-9 col-lg-7">
        <input id="test" type="text" class="form-control" />
    </div>
</div>

＆＃13;

在浏览页面时，默认使用下拉列表中的第一个选项填写自动填充输入。如果我设置minLength = 1，问题就解决了。但是，我必须保留minLength = 0才能在输入聚焦时弹出下拉列表。

一个想法是在第一次弹出下拉列表时删除焦点类。但问题是当我按下箭头时，第二个选项是聚焦而不是第一个选项。

我找不到任何手动对焦第一个选项的解决方案。请帮忙。

任何其他解决方案都非常受欢迎。提前谢谢。

Answer 1

我认为这会对你有帮助。

   
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#test" ).autocomplete({
      source: availableTags
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">

<div class="form-group">
    <label for="test" class="col-md-3 col-lg-3 control-label"></label>
    <div class="col-md-9 col-lg-7">
        <input id="test" type="text" class="form-control" />
    </div>
</div>

Answer 2

您需要在js.的最后一部分中将.autocomplete更改为.availableTags。我希望这会对您有所帮助

$( function() {
var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"];
    
    $("#test").autocomplete({
        minLength: 0,
        source: availableTags,
        autoFocus: true,
        select: function (event, ui) {
            if (ui.item) {
                event.preventDefault();
                $(this).val(ui.item.label);
            }
        },
        open: function (event, ui) {
            var menu = $(this).data("uiAutocomplete").menu;
            var items = $('li', menu.element);

            for (var i = 0; i < items.length; i++) {
                if (items.eq(i).text().startsWith($(this).val())) {
                    menu.focus(null, items.eq(i));
                    break;
                }
            }
        },
        focus: function (event, ui) {
            event.preventDefault();
            if ($(this).val() == "" && !event.keyCode) {
                //debugger;
                $('.ui-menu-item a').removeClass('ui-state-focus');
            }
            else {            
                //$(this).data("uiAutocomplete").menu.element.children().first().focus();
            }
        }
    }).on("focus", function () {
        $(this).availableTags("search", "");
    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">

<div class="form-group">
    <label for="test" class="col-md-3 col-lg-3 control-label"></label>
    <div class="col-md-9 col-lg-7">
        <input id="test" type="text" class="form-control" />
    </div>
</div>

Answer 3

好的，这就是我解决问题的方法。我没有使用autoFocus，而是在open函数中手动设置焦点。

    $("#test").autocomplete({
        minLength: 0,
        source: availableTags,
        //autoFocus: true,
        select: function (event, ui) {
            if (ui.item) {
                event.preventDefault();
                $(this).val(ui.item.label);
            }
        },
        open: function (event, ui) {
            var menu = $(this).data("uiAutocomplete").menu;
            var items = $('li', menu.element);

            if ($(this).val().length > 0) {
                for (var i = 0; i < items.length; i++) {
                    if (items.eq(i).text().toUpperCase().includes($(this).val().toUpperCase())) {
                        menu.focus(null, items.eq(i));
                        break;
                    }
                }
            }
        },
        focus: function (event, ui) {
            event.preventDefault();
        }
    }).on("focus", function () {
        $(this).autocomplete("search", "");
    });

jQuery自动完成 - 当minLength为零时如何防止自动对焦

3 个答案: