AutoComplete on focus show default drop down doesn't seem to work

Question

I want to use the autocomplete menu for a textbox, but instead of having to type something before you get results, i want the menu to pop up with all available options first on focus, then narrow as you type.

The problem is i tried the focus but with no success:

here is my code:

 var neighborhood_name = ["LA","NW","SE","GF"];
var statuses = [];


$(document).ready(function() {
    BindControls();
});

function BindControls() {

    $('#services').autocomplete({
        source: neighborhood_name,
        minLength: 0,
        scroll: true
    }).focus(function() {
        $(this).autocomplete("search", "");
    });
}

I'm using the follwing jQuery

https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js

Whenever I click on my input i get the following error: $(...).autocomplete is not a function on focus, althought it works when I start typing something but not when I want to see the full list. \

Any clues?

Thanks!

Jawad Khan Jawad Khan · Accepted Answer · 2020-05-12T18:15:07

Make sure you to have included Jquery UI library.

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>

So you will include both Jquery and Jquery UI.

[Edit]

Here is working Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" ></script>

<input type="text" id="services" value="" />
<script>
 var neighborhood_name = ["LA","NW","SE","GF"];
var statuses = [];


$(document).ready(function() {
    BindControls();
});

function BindControls() {

    $('#services').autocomplete({
        source: neighborhood_name,
        minLength: 0,
        scroll: true
    }).focus(function() {
        $(this).autocomplete("search", "");
    });
} 

</script>

AutoComplete on focus show default drop down doesn't seem to work

1 Answers