语义 ui 搜索不起作用

Question

我使用语义 ui，当我在网站上进行搜索时，结果为空，但当我查看控制台时，我看到了 json 结果

这是我的 js 代码

$('.ui.search').search({
    apiSettings: {
        url: "https://api.github.com/search/repositories?q={query}"
    },
   fields: {
        results: 'items',
        title: 'name',
        url: 'html_url',
        description: 'description'
    }
  });

还有我的html代码

<div class="ui right aligned category search item">
  <div class="ui transparent icon input">
    <input class="prompt" placeholder="Rechercher" type="text">
    <i class="search link icon"></i>
  </div>
  <div class="results"></div>
</div>

screenshot results in my html page

我已经尝试了语义 ui 页面的示例

    $('.ui.search')
  .search({
    type          : 'category',
    minCharacters : 3,
    apiSettings   : {
      onResponse: function(githubResponse) {
        var
          response = {
            results : {}
          }
        ;
        // translate GitHub API response to work with search
        $.each(githubResponse.items, function(index, item) {
          var
            language   = item.language || 'Unknown',
            maxResults = 8
          ;
          if(index >= maxResults) {
            return false;
          }
          // create new language category
          if(response.results[language] === undefined) {
            response.results[language] = {
              name    : language,
              results : []
            };
          }
          // add result to category
          response.results[language].results.push({
            title       : item.name,
            description : item.description,
            url         : item.html_url
          });
        });
        return response;
      },
      url: '//api.github.com/search/repositories?q={query}'
    }
  })

这是行不通的

Answer 1

和你有同样的问题

调试器并得到这个： debug screenshot

似乎会从响应中获取“结果”字段，因此如果您的响应没有“结果”字段，则需要在 onResponse 回调中设置“结果”：

apiSettings : {
  onResponse (response) {
    return {
      results: response.myresults
    }
  }
}

如果你没有设置模板，它将使用标准模板，标准模板使用'title'字段显示，你需要做一些这样的转换：

response.myresults.forEach((item) => {
  item.title = item.name;
})

希望对你有帮助