[Search] Styles not applied on results #904

matheusrufca · 2019-07-25T20:50:11Z

matheusrufca
Jul 25, 2019

Styles are not being applied on search results

On search component, the styles are not being applied on search results.
Also the spinner is not being activated during remote query.

Steps to reproduce

Write something on input

Expected result

Expected the search results with styles

Actual result

Search results has no style

Testcase

https://codepen.io/anon/pen/jgMrxB

Screenshot (when possible)

Version

2.7.6

Answered by jamessampford

Jul 25, 2019

Looks like you’ve made a typo
<div id="input-search" lass="ui search">

Should be
<div id="input-search" class="ui search">

It is missing the c in class

View full answer

matheusrufca · 2019-07-25T20:56:27Z

matheusrufca
Jul 25, 2019
Author

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.6/dist/semantic.min.css" />
<title>Hello, world!</title>
</head>
<body>
  <div id="input-search" lass="ui search">
    <div class="ui left icon input">
      <input name="github-search" class="prompt" type="search" placeholder="Search GitHub" />
      <i class="github icon"></i>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.6/dist/semantic.min.js"></script>
  <script src="autocomplete.js"></script>
</body>
</html>

autocomplete.js

$(window).ready(function() {
  $('#input-search').search({
	minCharacters: 3,
	maxResults: 10,
	fullTextSearch: true,
	searchOnFocus: false,
	ignoreDiacritics: true,
	sortSelect: 'natural',
	apiSettings: {
		url: '//api.github.com/search/repositories?q={query}'
	},
	fields: {
		results: 'items',
		title: 'name',
		url: 'html_url'
	}
  });
});

0 replies

jamessampford · 2019-07-25T22:07:06Z

jamessampford
Jul 25, 2019

Looks like you’ve made a typo
<div id="input-search" lass="ui search">

Should be
<div id="input-search" class="ui search">

It is missing the c in class

0 replies

lubber-de · 2019-07-26T11:43:17Z

lubber-de
Jul 26, 2019
Maintainer

Confirmed what @jamessampford said:
See https://codepen.io/anon/pen/EqgGvM

Closing, because issue is solved

0 replies

matheusrufca · 2019-07-30T00:47:13Z

matheusrufca
Jul 30, 2019
Author

Really sorry, totally didn't see that after several tries.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Search] Styles not applied on results #904

{{title}}

Replies: 4 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

[Search] Styles not applied on results #904

matheusrufca Jul 25, 2019

Styles are not being applied on search results

Steps to reproduce

Expected result

Actual result

Testcase

Screenshot (when possible)

Version

Replies: 4 comments

matheusrufca Jul 25, 2019 Author

jamessampford Jul 25, 2019

lubber-de Jul 26, 2019 Maintainer

matheusrufca Jul 30, 2019 Author

matheusrufca
Jul 25, 2019

matheusrufca
Jul 25, 2019
Author

jamessampford
Jul 25, 2019

lubber-de
Jul 26, 2019
Maintainer

matheusrufca
Jul 30, 2019
Author