Question

我正在使用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。

Answer 1

在小提琴下面检查以下内容：

https://jsfiddle.net/xdr18bo4/

在这里，您需要删除 并为CSS中的＃select2-my_select-results .select2-results__option添加样式。这种CSS样式将保留空格并在HTML UI中按原样显示它们。

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

Answer 2

另一种解决方案是使用自定义匹配器，将select的char''（字符代码32）替换为select2输入中的空格char（字符代码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);
  }
});

Answer 3

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

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

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

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

Answer 4

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

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>

select2选项空间未搜索

4 个答案: