CODEWITHSUNDEEP
javascriptphpjsonsearchsemantic-ui
john
john

Reputation: 478

Semantic ui search not work

I work with semantic ui and when I do a search on a website the result is empty but when I look at my console I see the json result

this is my js code

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

and my html code 

<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

and i have try the exemple for semantic-ui page 

    $('.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}'
    }
  })

and this is not work

Upvotes: 2

Views: 3616

Answers (1)

sunheart
sunheart

Reputation: 46

have the same problem as you

debugger and get this: debug screenshot

it seems will get 'results' field from response, so if your response without 'results' field you need set 'results' in onResponse callback:

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

and if you didn't set the templates, it will use the standard template, standard template use 'title' field to show, you need do some transform like this:

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

hope this can help you

Upvotes: 3

Related Questions