Is it possible with jQuery Auto-plete, to make it so that if there are 'source:' values available, but they don't match what you are typing, then just show all the sources at once?

IE, given the following code, if I type in "pineapple", how do you show all the programming languages instead of none of them?

<script>
$(function() {
    var availableTags = [
        "JavaScript",
        "Perl",
        "PHP",
        "Python",
        "Ruby"
    ];
    $( "#tags" ).autoplete({
        source: availableTags
    });
});
</script>
<input type="text" id="tags" />

Is it possible with jQuery Auto-plete, to make it so that if there are 'source:' values available, but they don't match what you are typing, then just show all the sources at once?

IE, given the following code, if I type in "pineapple", how do you show all the programming languages instead of none of them?

<script>
$(function() {
    var availableTags = [
        "JavaScript",
        "Perl",
        "PHP",
        "Python",
        "Ruby"
    ];
    $( "#tags" ).autoplete({
        source: availableTags
    });
});
</script>
<input type="text" id="tags" />

• javascript
• jquery
• jquery-ui
• jquery-ui-autoplete

2 Answers 2

Use the source property with a custom function. The custom function shown below mimics autoplete original behavior, searching for the typed text as substring inside available tags. If no match is found, all available tags are returned.

$(function() {
    var availableTags = [
        "JavaScript",
        "Perl",
        "PHP",
        "Python",
        "Ruby"
    ];
    $("#tags").autoplete({
        source: function(request, response) {
            var term = request.term.toLowerCase();
            var matchingTags = $.grep(availableTags, function(tag) {
                return tag.toLowerCase().indexOf(term) >= 0;
            });
            response(matchingTags.length ? matchingTags : availableTags);
        }
    });
});​

demo here

Just write a custom source callback.

For example:

source: function(req, res){
    res(['w00t', 'yay']);
}

See DOCs

In your case (pseudocode):

source: function(req, res){
     //find `req` in array
     if not found:
     res(availableTags);
     else:
     res({subset of availableTags});
}