CODEWITHSUNDEEP
jqueryautocompletefocus
Kevin Peng
Kevin Peng

Reputation: 21

JQuery UI display the autocomplete list triggered by the focus() event

I want to display the autocomplete list triggered by the focus() event, but looks like it only works for the first time when i focus on the "id" text box, and then i focus on the "id2" textbox, and focus back on "id" textbox, my autocomplete list will not be displayed, any reason why?

<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"
                    ],
            minLength: 0
        });

        $('#id').focus(function(){           
            $(this).trigger('keydown.autocomplete');
        });
    });
</script>


<input type="text" id="id">

<input type="text1" id="id2">

I want to display the autocomplete list triggered by the focus() event, but looks like it only works for the first time when i focus on the "id" text box, and then i focus on the "id2" textbox, and focus back on "id" textbox, my autocomplete list will not be displayed, any reason why?

<script type="text/javascript">
$(function() {
    $('#id').autocomplete({
        source: ["ActionScript",
                    "AppleScript",
                    "Asp",
                    "BASIC",
                    "C",
                    "C++",
                    "Clojure",
                    "COBOL",
                    "ColdFusion",
                    "Erlang",
                    "Fortran",
                    "Groovy",
                    "Haskell",
                    "Java",
                    "JavaScript",
                    "Lisp",
                    "Perl",
                    "PHP",
                    "Python",
                    "Ruby",
                    "Scala",
                    "Scheme"
                ],
        minLength: 0
    });

    $('#id').focus(function(){           
        $(this).trigger('keydown.autocomplete');
    });
});

Upvotes: 2

Views: 2739

Answers (3)

mohamed foad
mohamed foad

Reputation: 1

Try using

$(this).autocomplete("search",$(this).val())

instead of

$(this).autocomplete("search")

and make

minLength: 1

Upvotes: 0

Sid M
Sid M

Reputation: 4354

Do it this way

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"
                    ],
            minLength: 0
        }).on("focus", function () {
           $(this).autocomplete("search", '');
           });

    });
</script>

Upvotes: 0

Alias Eldhose
Alias Eldhose

Reputation: 145

Try using

$(this).autocomplete("search")

instead of

$(this).trigger('keydown.autocomplete')

Upvotes: 3

Related Questions