Question

我有一个jquery自动完成功能，它没有做任何事情。我使用了here.中的代码。它适用于他们的示例。

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

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

我已经尽力使用消息来表明它的意图 - 它是什么，但即使消息不起作用......我甚至无法得到响应值..

我在消息的表单下面创建了一个div，它们的工作已经使用点击功能进行了测试..我在“#Suburbs”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>

id“#Suburb”是正确的，适用于简单版本的.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"
       },

...

       {
           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：这是div元素“郊区”，因为我认为看看自动完成功能正在发挥作用可能是一个好主意。

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

Answer 1

好的，有些事情：

首先：你的jQuery .ready()函数根本没有运行。您正在组合几种速记和高级技术，但它们无法正常工作。（在下面的评论中有关这方面的更多细节）直到你可以做一些研究并将概念记下来，可能更好地使用长手法，并且只是做

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

第二：当您执行$('#Suburb')时，这意味着您必须在文档中的某个位置添加id="Suburb"元素。你的意见没有。

第三：您要返回的a数组是自动填充无法识别的对象数组。您需要返回一个字符串数组或以这种格式的对象数组：{ 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);
        },

话虽这么说，我已经为你的代码做了一些修改（做了一些假设），这是一个有效的fiddle。对不起，当你加入你的时候，我已经开始研究自己的小提琴了。继续使用我创建的小提琴比修改你的小提琴更容易。

Jquery .autocomplete无法正常工作

1 个答案: