CODEWITHSUNDEEP
javascriptjqueryhtml
Kunal
Kunal

Reputation: 65

how to add search functionality in multiselect?

I have two multiple selects in a page (select-cities & chosen-cities), and I can transfer options to and fro. I have given the search functionality to select-cities list. Everything functions as I need.

I need to add the search functionality for chosen cities list also. Can somebody suggest me how to do that. I tried doing it with the same code but it didn't work. Please suggest the solution. Here is the demo: http://jsfiddle.net/cs6Xb/130/

html:

<input id="someinput">
<br/>
<select class="select-cities" name="city" id="optlist" multiple="multiple">
    <option>Frederiksberg</option>
    <option>Vanløse</option>
    <option>Glostrup</option>
    <option>Brøndby</option>
    <option>Roskilde</option>
    <option>Køge</option>
    <option>Gentofte</option>
    <option>Hillerød</option>
    <option>Tårnby</option>
    <option>Vallensbæk</option>
</select>
</input>
<br/>
<input id="someinput1"/><br/>

<select class="chosen-cities" name="chosen-cities-name" id="optlist1" multiple="multiple"></select>

jquery:

$(function () {
    opts = $('#optlist option').map(function () {
        return [[this.value, $(this).text()]];
    });


    $('#someinput').keyup(function () {

        var rxp = new RegExp($('#someinput').val(), 'i');
        var optlist = $('#optlist').empty();
        opts.each(function () {
            if (rxp.test(this[1])) {
                optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
            } else{
                optlist.append($('<option/>').attr('value', this[0]).text(this[1]).addClass("hidden"));
            }
        });
        $(".hidden").toggleOption(false);

    });
    $('.select-cities').click(function () {
        $('.select-cities option:selected').remove().appendTo('.chosen-cities');
        opts = $('#optlist option').map(function () {
            return [[this.value, $(this).text()]];
        });
    });

    $('.chosen-cities').click(function () {
        $('.chosen-cities option:selected').remove().appendTo('.select-cities');
        opts = $('#optlist option').map(function () {
            return [[this.value, $(this).text()]];
        });
    });


});

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
            jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

Upvotes: 0

Views: 14200

Answers (2)

akashmalik
akashmalik

Reputation: 101

-> create a multi-select HTML

<select id="selectBox" class="select-box" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

-> add search box

<input type="text" id="searchBox" placeholder="Search">

-> jQuery to search and select in multiselect

<script>
    $(document).ready(function(){
        $('#searchBox').on('keyup', function(){
            var searchText = $(this).val().toLowerCase();
            $('#selectBox option').each(function(){
                var optionText = $(this).text().toLowerCase();
                var isVisible = optionText.indexOf(searchText) !== -1;
                $(this).toggle(isVisible);
            });
        });
    });
</script>

Upvotes: 0

aayush shrestha
aayush shrestha

Reputation: 1918

There's a great jQuery plugin for searchable select lists. its called "Chosen" . You might find it useful.

and it seems you have only written your function for #someinput but not for #someinput1 . May be that's the problem

Here, I have updated your fiddle to solve the problem. All I did was added the function for #someinput1.

$('#someinput1').keyup(function () {

var rxp = new RegExp($('#someinput1').val(), 'i');
var optlist = $('#optlist1').empty();
opts1.each(function () {
    if (rxp.test(this[1])) {
        optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
    } else{
        optlist.append($('<option/>').attr('value', this[0]).text(this[1]).addClass("hidden"));
    }
});
$(".hidden").toggleOption(false);

});

And a few tweaks to populate the second select list options. 

opts1 = $('#optlist1 option').map(function () {
        return [[this.value, $(this).text()]];
    });

Take a look

Solved Fiddle

Upvotes: 2

Related Questions