Jquery .autocomplete no funciona

Tengo un autocompletado jquery que no está haciendo nada. He usado el código deaquí. Funciona en su ejemplo.

Hay algunos cambios ... Primero, la matriz se crea desde una viewModelList y funciona. Aquí hay una pequeña parte:

               var suburbs = [
       {
           id: "17023",
           suburb: "Epsom",
           postCode: "3551",
           state: "VIC"
       },
       {
           id: "17024",
           suburb: "Muskerry",
           postCode: "3557",
           state: "VIC"
       }

Me he esforzado por usar mensajes para indicar el propósito, qué es, pero incluso los mensajes no funcionan ... Ni siquiera puedo obtener el valor de respuesta ...

Creé un div debajo del formulario para los mensajes y funcionan después de haber sido probados usando una función de clic. Intenté una función ".change" en la identificación "#Suburbs" y tampoco obtuve nada ...

Aquí está el código:

    <script>
    (function ($) {
        $(function () {

            var suburbs = [
       @for (var i = 0; i < Model.SuburbAndPostcodesList.Count; i++) {
           <text>{
           id: "@Model.SuburbAndPostcodesList[i].SuburbsAndPostcodesId",
           suburb: "@Model.SuburbAndPostcodesList[i].Suburb",
           postCode: "@Model.SuburbAndPostcodesList[i].PostCode",
           state: "@Model.SuburbAndPostcodesList[i].State.ShortName"
       }@(i == Model.SuburbAndPostcodesList.Count - 1 ? "" : ",")</text>
       }
            ];



            $("#Suburb").autocomplete({
                source: function (req, responseFn) {
                    addMessage("search on: '" + req.term + "'<br/>");
                    var re = $.ui.autocomplete.escapeRegex(req.term);
                    var matcher = new RegExp("^" + re, "i");
                    var a = $.grep(suburbs, function (item , index) {
                        //addMessage("&nbsp;&nbsp;sniffing: '" + item + "'<br/>");
                        return matcher.test(item.suburb);
                    });
                    addMessage("Result: " + a.length + " items<br/>");
                    responseFn(a);
                },

                select: function (value, data) {
                    if (typeof data == "undefined") {
                        addMessage('You selected: ' + value + "<br/>");
                    } else {
                        addMessage('You selected: ' + data.item.value + "<br/>");
                    }
                }
            });

            function addMessage(msg) {
                $('#msgs').append(msg);
            }
        });
    });

</script>

La identificación "#Suburb" es correcta y funcionó para una versión simple de .autocomplete.

EDITAR: aquí está el código de la página para el javascript. Espero que esto sea lo que buscabas.

      <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>




<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="/lib/jquery-ui/jquery-ui.js"></script>
<script>
    (function ($) {
        $(function () {

            var suburbs = [
       {
           id: "17023",
           suburb: "Epsom",
           postCode: "3551",
           state: "VIC"
       },
       {
           id: "17024",
           suburb: "Muskerry",
           postCode: "3557",
           state: "VIC"
       },

...

       {
           id: "17055",
           suburb: "Bonnet Hill",
           postCode: "7053",
           state: "TAS"
       },
       {
           id: "17056",
           suburb: "Wellington Park",
           postCode: "7054",
           state: "TAS"
       }
            ];



            $("#Suburb").autocomplete({
                source: function (req, responseFn) {
                    addMessage("search on: '" + req.term + "'<br/>");
                    var re = $.ui.autocomplete.escapeRegex(req.term);
                    var matcher = new RegExp("^" + re, "i");
                    var a = $.grep(suburbs, function (item , index) {
                        //addMessage("&nbsp;&nbsp;sniffing: '" + item + "'<br/>");
                        return matcher.test(item.suburb);
                    });
                    addMessage("Result: " + a.length + " items<br/>");
                    responseFn(a);
                },

                select: function (value, data) {
                    if (typeof data == "undefined") {
                        addMessage('You selected: ' + value + "<br/>");
                    } else {
                        addMessage('You selected: ' + data.item.value + "<br/>");
                    }
                }
            });

            function addMessage(msg) {
                $('#msgs').append(msg);
            }
        });
    });

</script>

EDIT2: Aquí está el elemento div "suburbio", ya que creo que es probablemente una buena idea ver en qué está trabajando el autocompletado.

<div class="form-group">
        <label class="col-md-2 control-label" for="Suburb">Suburb:</label>
        <div class="col-md-10">
            <input class="form-control" type="text" data-val="true" data-val-required="A suburb name is required" id="Suburb" name="Suburb" value="Eaglehawk" />
            <span class="text-danger field-validation-valid" data-valmsg-for="Suburb" data-valmsg-replace="true" />
        </div>
    </div>

Respuestas a la pregunta(1)

Su respuesta a la pregunta