Javascript Jquery.autocomplete不工作

我有一个jqueryautocomplete，它没有做任何事情。我在他们的示例中使用了来自It works的代码

有一些变化。。。首先，数组是从viewModelList创建的，它可以工作。以下是其中的一小部分：

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

我一直在努力使用消息来表示响应-它是什么，但即使是消息也不起作用。。。我甚至无法获得响应值

我在表单下方为消息创建了一个div，并使用单击功能对其进行了测试。。我在“#郊区”id上尝试了“.change”函数，但也没有得到任何结果

代码如下：

    <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>

（函数（$）{
$（函数（）{
var郊区=[
@对于（变量i=0；i”）；
var re=$.ui.autocomplete.escapeRegex（请求期限）；
var matcher=newregexp（“^”+re，“i”）；
var a=$.grep（郊区、功能（项目、索引）{
//addMessage（“嗅探：“+”项+“
”）；
返回匹配器测试（项）；
});
addMessage（“结果：+a.length+”项
）；
答复fn（a）；
},
选择：功能（值、数据）{
如果（数据类型==“未定义”）{
addMessage（'您选择：'+value+“
”）；
}否则{
addMessage（'您选择：'+data.item.value+“
”）；
}
}
});
函数addMessage（msg）{
$（'#msgs'）。附加（msg）；
}
});
});

id“#郊区”是正确的，适用于.autocomplete的简单版本

编辑：下面是javascript的页面代码。。希望这就是你想要的

      <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"
       },

（函数（$）{
$（函数（）{
var郊区=[
{
id:“17023”，
郊区：“爱普生”，
邮政编码:"3551",，
国家：“维克”
},
{
id:“17024”，
郊区：“麝香”，
邮政编码:"3557",，
国家：“维克”
},

{
身份证号码：“17055”，
郊区：“邦尼山”，
邮政编码:"7053",，
国家：“助教”
},
{
id:“17056”，
郊区：“惠灵顿公园”，
邮政编码:"7054",，
国家：“助教”
}
];
$（“#郊区”）.autocomplete({
来源：功能（请求、响应）{
addMessage（“搜索：”+req.term+“
”）；
var re=$.ui.autocomplete.escapeRegex（请求期限）；
var matcher=newregexp（“^”+re，“i”）；
var a=$.grep（郊区、功能（项目、索引）{
//addMessage（“嗅探：“+”项+“
”）；
返回匹配器测试（项）；
});
addMessage（“结果：+a.length+”项
）；
答复fn（a）；
},
选择：功能（值、数据）{
如果（数据类型==“未定义”）{
addMessage（'您选择：'+value+“
”）；
}否则{
addMessage（'您选择：'+data.item.value+“
”）；
}
}
});
函数addMessage（msg）{
$（'#msgs'）。附加（msg）；
}
});
});

EDIT2：这里是div元素“郊区”，因为我认为这可能是一个好主意，看看autocomplete在做什么

<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>

郊区：

好的，有几件事：

首先：jQuery

.ready（）

函数根本没有运行。您将几种速记和高级技术结合在一起，但它们不起作用。（在下面的评论中有更多关于这方面的详细信息）在你能做一些研究并把概念记下来之前，最好使用长时间的方法，然后就这样做

$(document).ready(function() {
});

第二：当您执行

$（“#郊区”）

时，这意味着您必须在文档中的某个位置有一个带有

id=“郊区”

的元素。你的输入没有这个

第三：您返回的

数组是一个自动完成程序无法识别的对象数组。您需要返回一个字符串数组或一个如下格式的对象数组：
{label:“Choice1”，value:“value1”}
。实现这一点最简单的方法就是将
.map
添加到现有代码中，就在
.grep
之后：

        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) {
                return matcher.test(item.suburb);
            });
            a = $.map(a, function(x){
                return x.suburb;
            });
            addMessage("Result: " + a.length + " items<br/>");
            responseFn(a);
        },

来源：函数（请求、响应）{
addMessage（“搜索：”+req.term+“
”）；
var re=$.ui.autocomplete.escapeRegex（请求期限）；
var matcher=newregexp（“^”+re，“i”）；
var a=$.grep（郊区、功能（项目、索引）{
返回匹配器测试（项）；
});
a=$.map（a，函数（x）{
返回x.s；
});
addMessage（“结果：+a.length+”项
）；
答复fn（a）；
},

也就是说，我对你的代码做了一些修改（做了一些假设），下面是一个工作示例。
        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) {
                return matcher.test(item.suburb);
            });
            a = $.map(a, function(x){
                return x.suburb;
            });
            addMessage("Result: " + a.length + " items<br/>");
            responseFn(a);
        },