对semantic-ui的dropdown添加高亮显示和分组

由于项目需要对dropdown搜索结果进行高亮处理，但是目前的semantic ui没有对应的接口可以调用，所以不得不对源码进行一些修改，这里只用作记录，避免将来代码被覆盖的时候找不回修改的部分。

需求如下：

semantic-ui的dropdown源码在/semantic/src/definitions/modules/dowpdown.js.

我们在第805行添加处理字符串的代码：

// 上一个搜索条件的html标签对当前字符串有影响，需要清理上一个的结果
var originalHtml = $(this).html().toString()
                                  .replace(/<strong>/g, '')
                                  .replace(/<\/strong>/g, '');
// 忽略大小和html标签，替换搜索的字符串，并加上特殊的html，我这里用的是strong
var newHtml = originalHtml.replace(new RegExp(searchTerm + "(?![^<>]*>)", "ig"), function(e){
  return '<strong>' + e + '</strong>';
});
// 替换当前的html，由于添加了strong标签，所以下一次搜索需要清理掉对应的标签
$(this).html(newHtml);

注意第794行的条件，if( module.has.query() )，也就是清空搜索内容后，这部分为空，之前的加粗标签在显示所有下拉选项的时候并没有被清理，所以需要在之后添加else处理没有搜索内容的情况。

// 方法很简单，遍历所有item并删掉strong标签即可
$item
  .each(function(){
    var defaultText = $(this).html().toString()
                      .replace(/<strong>/g, '')
                      .replace(/<\/strong>/g, '');
    $(this).html(defaultText)

    return true;
  })
;

另外，由于项目中dropdown进行了分组显示，搜索结果中如果itemgroup没有对应的内容，需要对itemgroup进行隐藏处理。

$item
  .not(results)
  .length === $item.length
  ? $item.parent().addClass(className.filtered)  // 如果搜索结果为空，itemgroup添加filtered的样式
  : $item.parent().removeClass(className.filtered)  // 如果搜索结果不为空，itemgroup删除filtered样式
;

项目中的html格式如下，具体的显示样式需要单独处理，比如strong标签取消加粗、修改颜色等：

<div class="ui selection dropdown search">
    <div class="text">Click to search</div>
    <div class="menu">
        <div class="itemgroup">
            <label>San Francisco</label>
            <div class="item">
                <span>San Francisco, International Airport</span>
                <span>SFO</span>
            </div>
            <div class="item">
                <span>Normal Y. Mineta San Jose International Airport</span>
                <span>SJC</span>
            </div>
        </div>
        <div class="itemgroup">
            <label>San Francisco</label>
            <div class="item">
                <span>San Francisco, International Airport</span>
                <span>SFO</span>
            </div>
            <div class="item">
                <span>Normal Y. Mineta San Jose International Airport</span>
                <span>SJC</span>
            </div>
        </div>
    </div>
</div>

原文链接：对semantic-ui的dropdown添加高亮显示和分组，转载请注明来源！