Question

I’m using jQuery autocomplete, right now when a user clicks in the input, there is no helper provided to tell the user what to do.

is there a way with jQuery autocomplete to show a helper message below the input showing “Type …… ” which is removed as soon as there are suggestions?

Thanks

Answer 1

How about something like this, you set a default value on your input field (e.g. Type here…). Then when the user clicks init, you clear out the default text and the autocomplete kicks in. However if they leave the input field without text, the default text returns to the text field. Here’s a jsFiddle example.

HTML:

<div class="ui-widget">     
    <label for="tags">Tags: </label>     
    <input id="tags" value="Type here...">
</div>

jQuery (using a local data source demo):

var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];
$("#tags").click(function(){
    if($(this).val() == 'Type here...') $(this).val('');
}).blur(function(){
    if($(this).val() == '') $(this).val('Type here...');
}).autocomplete({
    source: availableTags
});