JqueryUI Autocomplete Combobox with JSON

JqueryUI Autocomplete Combobox with JSON

Hi there, i got a problem, i don't how to use the autocomplete combobox of JqueryUI, i'm a newbie so i checked the documentation and i don't find an example with JSON, i just find them by separate examples. This is the code, i erased the options from the select control, i just did that:

My question is, where do i insert my source? thanks

This is my source:
source.php
  1. [{"mrc_id":"4","mrc_nmb":"BTC"},{"mrc_id":"5","mrc_nmb":"EPSON"},{"mrc_id":"6","mrc_nmb":"HP"},{"mrc_id":"7","mrc_nmb":"PANASONIC"}]
This is the page where the combobox is:
index.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Tipo de Cosas</title>
           
           <script language="javascript" type="text/javascript" src="../Jquery/jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script>  

         <link rel="stylesheet" type="text/css" href="../Jquery/jquery-ui-1.8.2.custom/css/custom-theme/jquery-ui-1.8.2.custom.css"/>
         <style type="text/css">
       
            .ui-button { margin-left: -1px; }
            .ui-button-icon-only .ui-button-text { padding: 0.35em; }
            .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
        </style>

        </head>
        <script type="text/javascript">
        (function($) {
            $.widget("ui.combobox", {
                _create: function() {
                    var self = this;
                    var select = this.element.hide();
                    var input = $("<input>")
                        .insertAfter(select)
                        .autocomplete({
                            source: function(request, response) {
                                var matcher = new RegExp(request.term, "i");
                                response(select.children("option").map(function() {
                                    var text = $(this).text();
                                    if (this.value && (!request.term || matcher.test(text)))
                                        return {
                                            id: this.value,
                                            label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                                            value: text
                                        };
                                }));
                            },
                            delay: 0,
                            change: function(event, ui) {
                                if (!ui.item) {
                                    // remove invalid value, as it didn't match anything
                                    $(this).val("");
                                    return false;
                                }
                                select.val(ui.item.id);
                                self._trigger("selected", event, {
                                    item: select.find("[value='" + ui.item.id + "']")
                                });
                               
                            },
                            minLength: 0
                        })
                        .addClass("ui-widget ui-widget-content ui-corner-left");
                    $("<button>&nbsp;</button>")
                    .attr("tabIndex", -1)
                    .attr("title", "Show All Items")
                    .insertAfter(input)
                    .button({
                        icons: {
                            primary: "ui-icon-triangle-1-s"
                        },
                        text: false
                    }).removeClass("ui-corner-all")
                    .addClass("ui-corner-right ui-button-icon")
                    .click(function() {
                        // close if already visible
                        if (input.autocomplete("widget").is(":visible")) {
                            input.autocomplete("close");
                            return;
                        }
                        // pass empty string as value to search for, displaying all results
                        input.autocomplete("search", "");
                        input.focus();
                    });
                }
            });

        })(jQuery);
           
        $(function() {
            $("#combobox").combobox();
            $("#toggle").click(function() {
                $("#combobox").toggle();
            });
        });
        </script>

    </head>
    <body>
       
    <div class="demo">

    <div class="ui-widget">
        <label>Choose something </label>
        <select id="combobox">
           
        </select>
    </div>
    </div>