Semantic UI Search

by radu

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/semantic.min.css">
<script src="https://unpkg.com/[email protected]/dist/semantic.min.js"></script>
<div class="ui container">
  <div class="ui fluid search">
    <div class="ui icon huge fluid input">
      <input class="prompt" type="text" placeholder="Search countries...">
      <i class="search icon"></i>
    </div>
    <div class="results"></div>
  </div>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

var content = [
  { title: 'Andorra', description: 'Andorra' },
  { title: 'United Arab Emirates', description: 'Emirates' },
  { title: 'Afghanistan', description: 'Afghanistan' },
  { title: 'Antigua', description: 'Antigua' },
  { title: 'Anguilla', description: 'Anguilla' },
  { title: 'Albania', description: 'Albania' },
  { title: 'Armenia', description: 'Armenia' },
  { title: 'Netherlands Antilles', description: 'Antilles' },
  { title: 'Angola', description: 'Angola' },
  { title: 'Argentina', description: 'Argentina' },
  { title: 'American Samoa', description: 'Samoa' },
  { title: 'Austria', description: 'Austria' },
  { title: 'Australia', description: 'Australia' },
  { title: 'Aruba', description: 'Aruba' },
  { title: 'Aland Islands', description: 'Islands' },
  { title: 'Azerbaijan', description: 'Azerbaijan' },
  { title: 'Bosnia', description: 'Bosnia' },
  { title: 'Barbados', description: 'Barbados' },
  { title: 'Bangladesh', description: 'Bangladesh' },
  { title: 'Belgium', description: 'Belgium' },
  { title: 'Burkina Faso', description: 'Faso' },
  { title: 'Bulgaria', description: 'Bulgaria' },
  { title: 'Bahrain', description: 'Bahrain' },
  { title: 'Burundi', description: 'Burundi' }
  // etc
];

$(function() {
  $('.ui.search').search({
		source: content,
    maxResults: 15
	});
});