Firstly I would like to say, that i am fairly new to jQuery and javascript. I am trying to use plugin called jQuery searchable dropdown plugin ( it's source code ). Also I have tried Select2 and Chosen and I don't like them, hard to customize and buggy.
On my page, users can append new select inputs (must have feature) and that causes some visual problems with this plugin.
I created a simple demonstration (jsfiddle.Net/sf42v/), click "Add new input" several times and You can see that first select input is getting bigger and bigger.
Firstly thank You for reading this post and I would really appreciate if You could say how to solve this problem.
Demo code for posterity:
<button type='button' id='addItem'>Add new input</button>
<form id='inputs'>
<div>
<select class='selectSearch'>
<option>Test1</option>
<option>Test2</option>
<option>Test3</option>
</select>
</div>
</form>
$('.selectSearch').searchable();
var container = $('#inputs');
$('#addItem').on('click', function () {
$("<div><select class='selectSearch'><option>Test1</option><option>Test2</option><option>Test3</option></select></div>").appendTo(container);
$('.selectSearch').searchable();
lenght++;
});
You are initializing the plugin on all the selects each time you add one.
You could do something like this instead;
var container = $('#inputs');
$('#addItem').on('click', function () {
var newSelect = $("<div><select class='selectSearch'><option>Test1</option><option>Test2</option><option>Test3</option></select></div>");
newSelect.appendTo(container);
newSelect.find(".selectSearch").searchable(); // only apply to the new select
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.