Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display jquery ui auto-complete list on focus event

Tags:

jquery

here is my code, anything wrong with it ? it doesn't seem to display list on focus, i still have to press a key before it displays list

<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
        });
    }).focus(function(){            
            $(this).trigger('keydown.autocomplete');
    });
</script>


<input type="text" id="id">
like image 833
Aman Avatar asked Nov 09 '10 09:11

Aman


3 Answers

This directly call search method with default value when focus.

http://jsfiddle.net/steelywing/ubugC/

$("input").autocomplete({
    source: ["Apple", "Boy", "Cat"],
    minLength: 0,
}).focus(function () {
    $(this).autocomplete("search");
});
like image 199
Steely Wing Avatar answered Nov 18 '22 17:11

Steely Wing


Looks like you are attaching your focus() handler to the anonymous function and not the text box.

Try this:

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function(){            
            // The following works only once.
            // $(this).trigger('keydown.autocomplete');
            // As suggested by digitalPBK, works multiple times
            // $(this).data("autocomplete").search($(this).val());
            // As noted by Jonny in his answer, with newer versions use uiAutocomplete
            $(this).data("uiAutocomplete").search($(this).val());
        });
    });
</script>
like image 22
3 revs, 2 users 93% Avatar answered Nov 18 '22 18:11

3 revs, 2 users 93%


The solution to make it work more than once

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function(){     
            //Use the below line instead of triggering keydown
            $(this).data("autocomplete").search($(this).val());
        });
    });
</script>
like image 61
digitalPBK Avatar answered Nov 18 '22 19:11

digitalPBK