Question

I’m using jQuery Tokenizer (http://loopj.com/jquery-tokeninput/) and am trying to add placeholder text like a normal input would have.

I’ve tried putting the text in the typical placeholder tag element like this:

<input data-autocomplete-source="http://localhost:3000/city_to_zips" id="account_town" name="city_to_zip_id" placeholder="Enter city..." type="text" style="display: none; ">

but, clearly, the tokenizer is hiding that input.

Answer 1

Method 1: Quick and dirty way, would be to add the placeholder attribute directly into the input that is created in your jquery.tokeninput.js file:

// Create a new text input an attach keyup events
var input_box = $("<input type=\"text\"  autocomplete=\"off\" placeholder=\"Enter city...\">")

Method 2: Add placeHolderText as one of the default settings. First add the parameter into the DEFAULT_SETTINGS e.g.:

placeHolderText: 'Enter City...',

then add the following:

.attr("placeholder", $(input).data("settings").placeHolderText)

before

.attr("id", $(input).data("settings").idPrefix + input.id)

By default the placeholder text will be “Enter City…”, you can override this when setting up the tokeninput e.g.:

$(function() {
    $("#account_town").tokenInput("http://example.com/search", {
    'placeHolderText': 'Enter Town...',
});

See pastebin (changes are on lines 31, 244)