kdes70
12/15/2016 - 3:19 PM

Autocomplete Search With Semantic UI

Autocomplete Search With Semantic UI

search.html
content_copyfile_download
<!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>