Search code examples
jqueryjquery-tokeninput

Adding Placeholder Text to jQuery Tokenizer

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.

Solution

  • 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)