CODEWITHSUNDEEP
javascriptjqueryhtmljquery-select2
Sangram Badi
Sangram Badi

Reputation: 4264

select2 option space not searching

I am using selec2 for dropdown.

i am getting data from backend and can successfully showing in the select2. but i have some data which have more then one space in between the word. like below

Test   Your   Code
I    Am  Developer
Testing Done

HTML Code

<select id='my_select' style="width:300px">
        <option>Test&nbsp;&nbsp;&nbsp;Your&nbsp;&nbsp;&nbsp;Code</option>
        <option>I&nbsp;&nbsp;&nbsp;&nbsp;Am&nbsp;&nbsp;Developer</option>
        <option value="An">Testing Done</option>
    </select>

Script

$("select").select2();

When i am trying to search data with space it is showing No matches found.

enter image description here

i have tried this stackoverflow solution also but it is not working

please check my jsfiddler.

Upvotes: 3

Views: 3963

Answers (4)

Programmer
Programmer

Reputation: 2123

Another solution is to use a custom matcher that replaces the char ' ' (char code 32) with the space char that is in the select2 input which is char code 160 (don't ask me why).

JS fiddle 

function mySearch(params, data) {
  params.term = params.term || '';

  term = params.term.toUpperCase().replace(/ /g, String.fromCharCode(160));
  text = data.text.toUpperCase();

  if (text.indexOf(term) > -1 ) {
    return data;
  }
  return false;
}

$('#my_select').select2({
  matcher: function(params, data) {    
    return mySearch(params, data);
  }
});

Upvotes: 2

Vignesh Raja
Vignesh Raja

Reputation: 8761

Using JS, create a callback function to the matcher property in select2. The following returns results when searched with single/multiple spaces.

select2 Docs for Reference

$("select").select2({
    matcher : function(params,data){
        if(!params.term) return data;
        else
        {
            var text = data.text.toLowerCase(), term = params.term.toLowerCase();
            if(text.replace(/\b\s+\b/g," ").indexOf(term)>-1) return data;
            if(text.replace(/\s/g," ").indexOf(term)>-1) return data;
            return null;
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<select id='my_select' style="width:300px">
    <option>Test   Your   Code</option>
    <option>I    Am  Developer</option>
    <option value="An">Testing Done</option>
</select>

Upvotes: 0

Rylee
Rylee

Reputation: 1656

Instead of using &nbsp; you can preserve spaces using the css property white-space: pre;

To apply this to your example, firstly remove the &nbsp; and replace with spaces, then add this CSS rule:

#select2-my_select-results .select2-results__option {
    white-space: pre;
}

I've updated your jsfiddle, you can view it here: https://jsfiddle.net/d751pyw2/91/

Upvotes: 1

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21766

Check below below fiddle:

https://jsfiddle.net/xdr18bo4/

Here you need to remove the &nbsp; and add style for #select2-my_select-results .select2-results__option in CSS. This CSS style will preserve the spaces and show them as it is in HTML UI.

#select2-my_select-results .select2-results__option {
    white-space: pre;
}

Upvotes: 2

Related Questions