CODEWITHSUNDEEP
javascriptphpjqueryjquery-pluginsselectize.js
André Garcia
André Garcia

Reputation: 1

selectize js breaking options and repeating input

**Hey **

I'm facing an issue with selectize on a dropdown. Whenever I click in any options from the dropdown everything is fine... However when i put any text input on the field, the options get weird...looks like it's repeating the text input i enter. Tried to remove the highlight function but no result.

Scenario:

Using last version of Selectize on wordpress child theme.

Using selectize.js and selectize.min.js from dist/js/standalone.

Using an included script that is working on the child folders.

script.js

$(document).ready(function(){
$('#search').selectize({highlight: false})
});

select list

<div class="exampleSearch">
    <select  placeholder="Choose some technologies..." id="search" multiple="multiple">
       <option value="1">Sample Value 1</option>
       <option value="2">Sample Value 2</option>
       <option value="3">Sample Value 3</option>
    </select>
    <input type="submit" value="Save" class="btn n-btn-flat">
</div>

Some pictures to illustrate:

Before text input

after text input

Upvotes: 0

Views: 1098

Answers (2)

realmiketalbot
realmiketalbot

Reputation: 1

I had a very similar issue and ended up solving it (thanks to the comment about how span elements are being added on text input) by noticing that I had some custom styles that were causing the issue. The offending CSS was:

span {
  display: block;
}

Which I replaced with:

span {
  display: inline-block;
}

Upvotes: 0

Dipen Shah
Dipen Shah

Reputation: 26085

Most likely you have some styles which are overriding default style for selectize and causing this issue.

Take a look at working example below:

$(document).ready(function() {
  $('#search').selectize({
    highlight: true
  })
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>
<div class="exampleSearch">
  <select placeholder="Choose some technologies..." id="search" multiple="multiple">
    <option value="1">Sample Value 1</option>
    <option value="2">Sample Value 2</option>
    <option value="3">Sample Value 3</option>
  </select>
  <input type="submit" value="Save" class="btn n-btn-flat">
</div>

Upvotes: 1

Related Questions