select2选项空间未搜索答案

【问题标题】：select2 option space not searchingselect2选项空间未搜索
【发布时间】：2018-07-24 05:27:24
【问题描述】：

我正在使用selec2 作为下拉菜单。

我正在从后端获取数据，并且可以在 select2 中成功显示。但我有一些数据在单词之间有一个以上的空格。如下所示

Test&nbsp;&nbsp;&nbsp;Your&nbsp;&nbsp;&nbsp;Code
I&nbsp;&nbsp;&nbsp;&nbsp;Am&nbsp;&nbsp;Developer
Testing Done

HTML 代码

<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>

脚本

$("select").select2();

当我尝试使用空格搜索数据时，它显示No matches found。

我也试过这个stackoverflow solution，但它不起作用

请查看我的jsfiddler。

【问题讨论】：

您想从选项文本中删除不需要的空格吗？
@Mamun 不，我不想弄乱现有数据

标签： javascript jquery html jquery-select2

【解决方案1】：

另一种解决方案是使用自定义匹配器，将字符“”（字符代码 32）替换为 select2 输入中的空格字符，即字符代码 160（不要问我为什么）。

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);
  }
});

【讨论】：

【解决方案2】：

检查下面的小提琴：

https://jsfiddle.net/xdr18bo4/

这里您需要删除&nbsp; 并在CSS 中为#select2-my_select-results .select2-results__option 添加样式。此 CSS 样式将保留空格并按照 HTML UI 中的方式显示它们。

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

【讨论】：

【解决方案3】：

您可以使用 css 属性 white-space: pre; 保留空格，而不是使用 &nbsp;

要将其应用于您的示例，首先删除 &nbsp; 并替换为空格，然后添加此 CSS 规则：

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

我已经更新了你的 jsfiddle，你可以在这里查看：https://jsfiddle.net/d751pyw2/91/

【讨论】：

你能放一个 jsfidller 或 plunker 吗？
@SangramBadi 我用 jsfiddle 链接编辑了我的答案

【解决方案4】：

使用JS，为select2中的matcher属性创建一个回调函数。以下是使用单个/多个空格搜索时返回的结果。

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>

【讨论】：