Search code examples
javascriptjsonsearchsemantic-ui

Semantic UI - Search options are blank


So I'm trying to figure out how Semantic UI's Search module works. I've been testing it on some test data:

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"
    }
];

Currently, it seems like it's actually making the search. There are two names with the word "name" in them - NameX and NameY, and it's giving me two results, the problem is that those results are just blank. [https://i.sstatic.net/568XV.png

This is how the search element is configured:

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

I've been going through the documentation and it seems like it should work, but it doesn't. Am I missing something obvious?


Solution

  • I figured out what the problem was. The search module of Semantic UI expects certain keys, so my equivalent "name" would have to be "title". I fixed it by going through the JSON and replacing every occurance of

    "name":

    with

    "title":

    I tried using

    fields: {
      title   : 'name'
    }
    

    but that didn't work for some reason.