Question

Given a straightforward jQuery Autocomplete, I’m trying to figure out how to dynamically add whatever the user has typed into the textbox as the first item that gets returned in the list.

$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: ["Alpha", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Juliet", "Kilo", "Lima", "Mike", "November", "Oscar", "Papa", "Quebec", "Romeo", "Sierra", "Tango", "Uniform", "Victor", "Whiskey", "X-ray", "Yankee", "Zulu"]
    });
});

For instance, if the user types “Alph”, the autocomplete will return:

• Alph
• Alpha

With the “Alpha” coming from the autocomplete source and the “Alph” being dynamically inserted.

I appreciate any help as I am very new to jQuery and currently surfing the learning curve.

Answer 1

$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: function(request, response){
            var options = ["Alpha", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Juliet", "Kilo", "Lima", "Mike", "November", "Oscar", "Papa", "Quebec", "Romeo", "Sierra", "Tango", "Uniform", "Victor", "Whiskey", "X-ray", "Yankee", "Zulu"];
            var results = [request.term];
            var regex = new RegExp(request.term, "i");
            for(var i = 0; i< options.length; i++){
                if (options[i].match(regex))
                    results.push(options[i]);
            }
            response(results);
        }       
    });
});