语义 UI - 搜索选项为空白

Question

所以我想弄清楚语义 UI 的搜索模块是如何工作的。我一直在用一些测试数据对其进行测试：

const testdata = [
    {
    "id": 7,
    "created_at": "2020-03-24 08:40:42",
    "updated_at": "2020-03-25 10:10:59",
    "name": "NameX",
    "email": "namex@email.no",
    "phone": "94860509"
    },
    {
    "id": 8,
    "created_at": "2020-03-25 10:11:10",
    "updated_at": "2020-03-25 10:11:10",
    "name": "NameY",
    "email": "namey@gmail.com",
    "phone": "94860509"
    },
    {
    "id": 9,
    "created_at": "2020-03-31 15:55:06",
    "updated_at": "2020-03-31 15:55:19",
    "name": "Lucifer",
    "email": "lucifer@gmail.com",
    "phone": "58893177"
    },
    {
    "id": 10,
    "created_at": "2020-03-31 15:55:41",
    "updated_at": "2020-03-31 15:55:41",
    "name": "Morningstar",
    "email": "morningstar@gmail.com",
    "phone": "12345678"
    },
    {
    "id": 11,
    "created_at": "2020-04-01 16:13:39",
    "updated_at": "2020-04-01 16:13:39",
    "name": "Superwhale",
    "email": "superwhale@gmail.com",
    "phone": "18181818"
    }
];

目前看来，它确实在进行搜索。有两个名称中包含单词 "name" - NameX 和 NameY，它给了我两个结果，问题是这些结果只是空白。 [https://i.imgur.com/O6CcAdc.png][1]

这是搜索元素的配置方式：

$('.ui.search').search({
    source: testdata,
    showNoResults: true,
    ignoreDiacritics: true,
    searchFullText: false,
    searchFields: [
        'name'
    ]
});

我一直在浏览文档，它似乎应该可以工作，但实际上没有。我是否遗漏了一些明显的东西？

Answer 1

尝试按函数过滤结果

const filterNameObj = (array) => array.filter(item => {
  if((item.name === 'NameX') || (item.name === 'NameY')) return item
})

filterNameObj(testdata )

const testdata = [
  {
  "id": 7,
  "created_at": "2020-03-24 08:40:42",
  "updated_at": "2020-03-25 10:10:59",
  "name": "NameX",
  "email": "namex@email.no",
  "phone": "94860509"
  },
  {
  "id": 8,
  "created_at": "2020-03-25 10:11:10",
  "updated_at": "2020-03-25 10:11:10",
  "name": "NameY",
  "email": "namey@gmail.com",
  "phone": "94860509"
  },
  {
  "id": 9,
  "created_at": "2020-03-31 15:55:06",
  "updated_at": "2020-03-31 15:55:19",
  "name": "Lucifer",
  "email": "lucifer@gmail.com",
  "phone": "58893177"
  },
  {
  "id": 10,
  "created_at": "2020-03-31 15:55:41",
  "updated_at": "2020-03-31 15:55:41",
  "name": "Morningstar",
  "email": "morningstar@gmail.com",
  "phone": "12345678"
  },
  {
  "id": 11,
  "created_at": "2020-04-01 16:13:39",
  "updated_at": "2020-04-01 16:13:39",
  "name": "Superwhale",
  "email": "superwhale@gmail.com",
  "phone": "18181818"
  }
];

const filterNameObj = (array) => array.filter(item => {
  if((item.name === 'NameX') || (item.name === 'NameY')) return item
})

console.log(filterNameObj(testdata))

Answer 2

我知道问题出在哪里了。 Semantic UI 的搜索模块需要某些键，所以我的等效 "name" 必须是 "title"。我通过遍历 JSON 并替换

的每一次出现来修复它

"name":

和

"title":

我试过使用

fields: {
  title   : 'name'
}

但由于某些原因没有奏效。

语义 UI - 搜索选项为空白

Semantic UI - Search options are blank

javascript

search

json

semantic-ui