<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Semantic-UI Search
</
title
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
class
=
"ui green header"
>
GeeksforGeeks
</
h1
>
<
h3
>
Semantic UI Search Variations
</
h3
>
<
br
>
<
p
>Disabled search</
p
>
<
div
class
=
"ui disabled search"
>
<
div
class
=
"ui icon input"
>
<
i
class
=
"search icon"
></
i
>
<
input
class
=
"prompt"
type
=
"text"
placeholder
=
"Search for tutorials..."
/>
</
div
>
<
div
class
=
"results"
></
div
>
</
div
>
<
br
>
<
p
>Fluid search</
p
>
<
div
class
=
"ui fluid search"
>
<
div
class
=
"ui icon input"
>
<
i
class
=
"search icon"
></
i
>
<
input
class
=
"prompt"
type
=
"text"
placeholder
=
"Search for tutorials..."
/>
</
div
>
<
div
class
=
"results"
></
div
>
</
div
>
<
br
>
<
p
>Aligned search</
p
>
<
div
class
=
" ui container"
>
<
div
class
=
"ui left aligned category search"
>
<
div
class
=
"ui icon input"
>
<
i
class
=
"search icon"
></
i
>
<
input
class
=
"prompt"
type
=
"text"
placeholder
=
"Search for tutorials..."
>
</
div
>
<
div
class
=
"results"
></
div
>
</
div
>
</
div
>
</
center
>
<
script
>
var content = [{
title: "Python",
url:
description: `Python is a high-level,
general-purpose and a very popular
programming language.`,
}, {
title: "Javascript ",
url:
description: `JavaScript is the world
most popular lightweight, interpreted
compiled programming language.`
}, {
title: "Java",
url:
description: `Java is one of the most
popular and widely used programming
languages.`
}];
$(".ui.search").search({
source: content,
fullTextSearch: false,
});
</
script
>
</
body
>
</
html
>