jQuery autocomplete - how to prevent auto focus when minLength is zero

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>

While tabbing through the page, inputs with autocomplete are filling out by default with the first option in dropdown. If I set minLength = 1, problem solved. However, I have to keep minLength = 0 in order to pop up the dropdown when the input is focused.

One thought is that removing the focus class when first popping up the dropdown. But the problem is when I press the arrowdown, the second option is focused instead of the first one.

I cannot find any solution to manually focus the first option. Please help.

Any other solutions are more than welcome. Thanks in advance.

score 0 · Answer 1 · answered Dec 07 '17 at 08:42

I think This will help you.

   
    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>

Thanks for your replay. The dropdown needs to show up when the input field is focused. That's why I included minLength = 0 for dropdown popping up. However I don't want the default function of auto focusing the first option in dropdown. Hope this is clear. — Sophia, Dec 07 '17 at 17:18
I think I found the problem. When combine minLength = 0, autofocus = true and on focus function, the dropdown will popup with first item focused. I need minLength and on focus function in order to popup the dropdown at first point. I need autofocus when user enters sth and the option is auto focused. But I don't want the first option being focused when user doesn't enter anything. Hope I'm making sense. $( "#test" ).autocomplete({ source: availableTags, minLength: 0, autoFocus: true }).on("focus", function () { $(this).autocomplete("search"); });; — Sophia, Dec 07 '17 at 17:43

score 0 · Answer 2 · answered Dec 07 '17 at 08:49

You Need to change .autocomplete to .availableTags in last part of your js.I hope this will help you

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

score 0 · Answer 3 · answered Dec 07 '17 at 18:39

Okay, this is what I got to fix my problem. Instead of using autoFocus, I manually set the focus in open function.

    $("#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 autocomplete - how to prevent auto focus when minLength is zero

3 Answers3