Untitled

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf8">
    <title>Paper Heros Comics Inventory Locator</title>
    <link rel="stylesheet" href="/PH_Inventory/jquery-ui-1.11.2.custom/jquery-ui.css">
    <script src="/PH_Inventory/jquery-1.11.2.min.js"></script>
    <script src="/PH_Inventory/jquery-ui-1.11.2.custom/jquery-ui.js"></script>
    <style>
        #cards { width: 25em; }
    </style>

</head>
<body>

<script>
    $(function(){
            $( "#cards" ).autocomplete({
                delay: 500,
                minLength: 3,
                source: function( request, response ){
                    console.log("entering source");
                    $.getJSON("http://yugiohprices.com/api/card_data/" + request.term, function(data){
                        var card = $.parseJSON(data);
                        console.log(JSON.stringify(card));
                        response(card.name);
                    });
                },
                focus: function(event, ui) {
                    // prevent autocomplete from updating the textbox
                    event.preventDefault();
                },
                select: function(event, ui) {
                    // prevent autocomplete from updating the textbox
                    event.preventDefault();
                }
            });
    });
</script>

<div class="ui-widget">
    <label for="cards">Cards: </label>
    <input id="cards">
</div>

</body>
</html>