Mohan
Mohan

Reputation: 741

selectize.js typeahead character (yellow) color is not resetting

I tried using the selectize.js for one of my component and i am facing an issue. Can someone help in pointing what is wrong?

enter image description here

I just typed first few character of all the option and remove those character, but the yellow highlight is not resetting from previous type. The appended span to the div with option class tag is not removed.

JSP

<select id="select-state" multiple>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>  

script

<script>
    $(function() {
        $('#select-state').selectize({
            plugins: ['remove_button'],
        });
    });
</script>  

Version i am using for selectize.js is 0.12.3.

https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.3/css/selectize.bootstrap2.min.css

https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.3/js/standalone/selectize.min.js

jsfiddle: http://jsfiddle.net/wh6Nx/308/

Update

As the issue which i mentioned has already be added part of 0.12.4 milestone. May be future release won't have this issue.

Upvotes: 1

Views: 1195

Answers (1)

smcd
smcd

Reputation: 3265

Here's a link to a bug report that looks like the issue you are experiencing https://github.com/selectize/selectize.js/issues/1141

Here's a fiddle demonstrating issue https://jsfiddle.net/kthy1gtx/

Here's a hack to work around the issue

https://jsfiddle.net/kthy1gtx/1/

$(function() {
    $('#select-state').selectize({
        plugins: ['remove_button'],
        onType: function(val) {
            if (val === "") { /* when the input is cleared, clear all cache highlighting */
                $.each(this.renderCache.option, function(k, v) {
                    v.innerHTML = $(v).text();
                });
            }
        }
    });
});

Only works on typing, select with mouse and cut or delete still has issue.

Upvotes: 2

Related Questions