Skip to content

Instantly share code, notes, and snippets.

@marcosfreitas

marcosfreitas/search.html

Last active May 20, 2019 15:10
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save marcosfreitas/41a5d4e34f56a3ca6067 to your computer and use it in GitHub Desktop.
Save marcosfreitas/41a5d4e34f56a3ca6067 to your computer and use it in GitHub Desktop.
Download ZIP
Autocomplete Search With Semantic UI
Raw
search.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Autocomplete Search With Semantic UI</title>
<link rel="stylesheet" href="semantic/dist/semantic.css">
</head>
<body>
<center style="padding: 30px 0;width: 227px;margin: 0 auto;">
<h1>Search for colors</h1>
<div class="ui search focus">
<div class="ui icon input">
<input class="search" type="text" placeholder="Colors..." autocomplete="off">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="semantic/dist/semantic.js"></script>
<script>
// Define API endpoints once globally
$.fn.api.settings.api = {
'search' : '/search/colors/?query={value}'
};
$('.search input')
.api({
debug: true,
action: 'search',
url: 'http://localhost/semantic-ui/labs/colors/colors.php?query={value}',
searchFullText: false,
stateContext: '.ui.input'
})
;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment