Jquery .autocomplete not working

Question

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 fr

Answer 1

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.