Oblivion

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Movies</title>
    <link rel="stylesheet" href="jquery/jquery-ui.css">
    <style>
        #desc{
            background-color: aliceblue;
            width: 220px;
            padding: 5px;
            border: dotted 2px darkgray;
            display: none;
        }
        .ui-autocomplete{
            width: 1200px;
        }
    </style>
    <script src = "jquery/jquery.js"></script>
    <script src = "jquery/jquery-ui.js"></script>
</head>
<body>
    <label>Select a movie:</label>
    <br>
    <input id="input">
    <br>
    <br>
    <div id="desc"></div>
    <script>
        var movies = [
            {
                label: "Oblivion",
                desc: "A veteran assigned to extract Earth's remaining resources begins to question what he knows about his mission and himself."
            },
            {
                label: "Ender's Game",
                desc: "Young Ender Wiggin is recruited by the International Military to lead the fight against the Formics, a genocidal alien race which nearly annihilated the human race in a preious invasion."
            },
            {
                label: "Elysium",
                desc: "In the year 2154, the very wealthy live on a man-made space station while the rest of the population resides on a ruined Earth. A man takes on a mission that could bring equality to the polarized worlds."
            }
        ];

        $("#input").autocomplete({
            source: movies,
            minLength: 0,
            focus: function( event, ui ) {
                $( "#input" ).val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $("#input").val(ui.item.label);
                $("#desc").html(ui.item.desc).show();
            }
        }).autocomplete( "instance" )._renderItem = function( ul, item ) {
            return $( "<li>" )
                    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                    .appendTo( ul );
        }
    </script>
</body>
</html>