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

Question

 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", "");
    });

<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>

在页面中切换时，默认情况下会使用下拉菜单中的第一个选项填写带有自动完成功能的输入。如果我设置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

好的，这就是我要解决的问题。我没有使用自动对焦，而是在打开功能中手动设置焦点。

    $("#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", "");
    });