语义ui搜索不起作用

时间:2016-11-01 17:50:33

标签: javascript php json search semantic-ui

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

这是我的js代码

.out {
  border: 1px solid red;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.row {
  display: inline-flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid yellow;
}
.infos {
  border: 1px solid green;
  flex-basis: 350px;
}
.dynamic {
  border: 1px solid blue;
  flex: 1 1;
}

和我的HTML代码

<div class="out">
  <div class="row">
    <div class="infos">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a
    </div>
    <div class="dynamic">
      Lorem ipsum
    </div>
  </div>

</div>

screenshot results in my html page

我已经尝试了semantic-ui页面的例子

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

这不起作用

1 个答案:

答案 0 :(得分:1)

与你有同样的问题

调试器并得到这个: debug screenshot

似乎会得到“结果”&#39;来自回复的字段,如果您的回复没有&#39;结果&#39;您需要设置的字段&#39;结果&#39;在onResponse回调中:

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

如果您没有设置模板,它将使用标准模板,标准模板使用&#39;标题&#39;要显示的字段,你需要做一些这样的转换:

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

希望这可以帮到你