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>
    <div class="ui-widget">
    <label for="cards">Cards: </label>
    <input id="cards">
</div>
<script>
        $(function() {
            $( "#cards" ).autocomplete({
                delay: 500,
                minLength: 3,
                source: function( request, response ){
                    $.getJSON("http://yugiohprices.com/api/card_data/",{
                         q: request.term,
                         page_limit: 10
                    }, function(data) {
                        var cardArray = data.error ? [] : $.map(data.card_data, function(c){
                            return {
                                value: c.name,
                                label: c.name
                            };
                        });
                        response(cardArray);
                    });
                },
                focus: function(event, ui) {
                    // prevent autocomplete from updating the textbox
                    event.preventDefault();
                },
                select: function(event, ui) {
                    // prevent autocomplete from updating the textbox
                    event.preventDefault();
                    // navigate to the selected item's url
                    window.open(ui.item.url);
                }
            });
        });
</script>

</body>
</html>