如何使用语义UI的本地搜索对搜索结果重新排序?

时间:2015-09-17 15:13:33

标签: typeahead semantic-ui

我有一个本地搜索框,使用带有哈希数组的Semantic 2.1。

[{ title: 'Andorra' , rank: 1 } , { title: 'United Arab Emirates', rank: 2 } , { title: 'Afghanistan' , rank: 3 } , { title: 'Antigua' , rank: 4 } ,...]

我希望搜索结果按照数组中哈希的顺序排序。 例如,使用搜索字符串Ar搜索国家/地区,现在我

Armenia
Argentina
Aruba
Andorra
United Arab Emirates
American Samoa
Austria

但我想展示

United Arab Emirates
Armenia
Argentina
...

如果不重写源代码,有没有办法做到这一点?

以下是我设置的演示小提琴:http://jsfiddle.net/zestly/ckxpvgm7/1/

作为奖金问题,有人可以解释为什么美属萨摩亚会被遣返吗?

1 个答案:

答案 0 :(得分:2)

只有我知道的方法是使用以下内容覆盖搜索功能的结果HTML创建:

$.fn.search.settings.templates = {
  standard: function(response) {
   // Your own sorting logic here
   var sortedResults = response.results.sort(function(a, b) {
       if (a.title === 'United Arab Emirates' || b.title === 'United Arab Emirates')
           return 1;
       else if (a.rank > b.rank)
           return 1;
       else if (a.rank < b.rank)
           return -1;
       else
           return 0;
   });

   // Create the DOM as as it normally should be
   return $.map(sortedResults, function(item) {
     return $('<div>').append($('<a>').addClass('result').append(
       $('<div>').addClass('content').append(
         $('<div>').addClass('title').text(item.title)
       )
     )).html();
   });
  }
};

这是您在结果数组绘制到结果容器之前最后一次访问结果数组。您可以使用自己的排序逻辑重新排列它,然后构建一个与通常返回的结果相匹配的结果DOM。