javascriptjqueryhtmlcssselectize.js

selectize.js placeholder width issue

I am using selectize.js jquery library for autocomplete (autosuggest) functionality.

Everything working good except from placeholder issue.

Below is my code what I have done.

HTML CODE

<input class="form-control" 
                   aria-describedby="basic-addon2"

                   name="q" 
                   id="q"
                   data-request="" 
                   data-request-success="console.log(data)" 
                   data-track-input="true" 
                   autocomplete="off" 
                   value="{{ search_value.q }}"
                   type="text">

JAVASCRIPT CODE

$('#q').selectize({
    plugins: ['remove_button'],
    valueField: 'address',
    labelField: 'address',
    searchField: 'address',   
    placeholder:'Search Properties by suburb, region, postcode or address',                  
    create: true,    
    render: {
        item: function(data, escape) {
            return '<div>' + escape(data.address) + '</div>';
        }

    },
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url:  base_url + '/search-property-autocomplete',
            type: 'POST',
            dataType: 'json',
            data: {
                q: query,

            },
            error: function() {
                callback();
            },
            success: function(res) {
                console.log(res.properties);
                callback(res.properties);
            }
        });
    }
});
$(".selectize-input input[placeholder]").attr("style", "width: 100%;");

This is how it looks like when I load the page.

enter image description here

Its showing full text of placeholder .. but when I am about to type and getting the hint and select anything and when I am clearing all items, its width decreased and showing something like below.

enter image description here

As we can see, placeholder text is cutting.

This is a video link how its behaving at the moment - http://www.screencast.com/t/B1w1TssUAelI

I have tried to put few events which does not work.

Can someone help me how to solve this ?

Solution

  • OK Guys, Eventually I have solved this and below is the code I put in my javascript file.

    JAVASCRIPT CODE

    $('#q').selectize({
    plugins: ['remove_button'],
    valueField: 'address',
    labelField: 'address',
    searchField: 'address',                 
    create: true,    
    render: {
        item: function(data, escape) {
            return '<div>' + escape(data.address) + '</div>';
        }

    },
    onChange: function(value) {
      $(".selectize-input input[placeholder]").attr("style", "width: 100%;");
    },
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url:  base_url + '/search-property-autocomplete',
            type: 'POST',
            dataType: 'json',
            data: {
                q: query,

            },
            error: function() {
                callback();
            },
            success: function(res) {
                console.log(res.properties);
                callback(res.properties);
            }
        });
    }
});

$(".selectize-input input[placeholder]").attr('placeholder','Search Properties by suburb, region, postcode or address');
$(".selectize-input input[placeholder]").attr("style", "width: 100%;");

    AS you can see in above code, I have added below code into it. 

    onChange: function(value) {
  $(".selectize-input input[placeholder]").attr("style", "width: 100%;");
},

    This will set the width to 100% whenever I update my selections even if I delete all my selections, this will work.

    Hope this helps.