jQuery autocomplete: How to display a help text in suggestion area

Question

We have recently implemented changes to our autocomplete, because very short queries created a lot of load on the server. You can get the full story here.

We have now increased the minimum amount of characters from 2 to 5, and would like to communicate this to users who otherwise might think the function is broken. The desired result is:

However, I have no idea how to do the "2 characters to go" in jQuery. It would have to be an event that fires if there are 1-4 characters in the search box. At five characters, the auto-complete widget should function normally.

Any hints are greatly appreciated! Many thanks in advance.

Answer 1

For this behaviour, you could simply intercept the "change" event on the input, count the input.val().length, and show a label under the input.

Something like this:

$("#input").autocomplete().on("change", function() {
    var charsLeft = 5 - $(this).val().length;
    if (charsLeft > 0) { 
         $("#label").html(charsLeft + " more characters to go...")
    } else { 
         $("#label").html("");
    }
});