CODEWITHSUNDEEP
javascriptjquery
MGE
MGE

Reputation: 853

Select div options as youtube suggestions

I want to know how can I select options of a suggestion divs with keyboard up/down arrows, as in youtube, when you type any key and the suggestion appears you can select an option with the keyboards arrows. I have a textbox and I have a "suggestion" div bellow. How can I do it? (Im not using jQuery autocomplete)

Upvotes: 0

Views: 137

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038930

You may take a look at the jQuery UI Autocomplete plugin. Here's an example from the documentation which illustrates how you could turn a standard <input> element into an Autocomplete box using a specified data source:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(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"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>
</head>
<body>

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
</div>


</body>
</html>

In this example the data is hardcoded into the HTML but the plugin also supports retrieving the autocomplete values using a remote datasource.

So it's up to you to play with it and come back on StackOverflow if you encounter some specific problems with the implementation (without forgetting to show your progress so far of course).

Upvotes: 1

Related Questions