CODEWITHSUNDEEP
javascriptjqueryautocomplete
si2030
si2030

Reputation: 4035

Jquery .autocomplete not working

I have a jquery autocomplete which is not doing anything. I have used the code from here. It works in their example.

There are some changes... First, array is created from a viewModelList and it works. here is a small part of it:

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

I have endeavoured to use messages to indicate the respose - what it is but even the messages dont work... I cannot even get the response value..

I created a div below the form for the messages and they work having been tested using a click function.. I did try a ".change" function on the "#Suburbs" id and also got nothing..

Here is the code:

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

The id "#Suburb" is correct and worked for a simple version of .autocomplete.

EDIT: here is page code for the javascript.. Hope this is what you were after..

      <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: Here is the div element "suburb" as I think its probably a good idea to see what the autocomplete is working on.

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

Upvotes: 1

Views: 183

Answers (1)

David784
David784

Reputation: 7464

Okay, a few things:

first: your jQuery .ready() function isn't running at all. You are combining several shorthand and advanced techniques, and they are not working. (More details on this in the comments below) Until you can do some research and get the concepts down, probably better to use the long-hand method, and just do 

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

Second: when you do $('#Suburb'), that means you have to have an element with id="Suburb" someplace in your document. Your input didn't have that.

Third: your a array that you are returning is an array of objects which your autocomplete won't recognize. You either need to return an array of strings, or an array of objects in this format: { label: "Choice1", value: "value1" }. The easiest way to accomplish this was just to add .map into your existing code, right after the .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);
        },

That being said, I have made some mods to your code (making some assumptions) and here is a working fiddle. Sorry, I had already started working on my own fiddle by the time you added yours. It was easier to just continue with the fiddle that I created than it was to modify yours.

Upvotes: 2

Related Questions