ElasticSearch with Typeahead.js - editted

elasticsearch-with-typeahead-js-editted.markdown

ElasticSearch with Typeahead.js - editted

A Pen by Madhusudan Banik on CodePen.

License.

index.html

<div class="container">
	<h1>GeoNames Search and Twitter’s typeahead.js</h1>
  <p>A combination of the GeoNames Search API, Twitter Bootstrap 3, and Twitter’s typeahead.js library</p>
  <h3>Demo Form</h3>
	<form action="#">
		<div class="form-group">
			<label for="location-1">Search for a location</label>
			<input id="location-1" type="text" class="form-control typeahead" placeholder="Cannes" data-provide="typeahead" autocomplete="off">
		</div>
	</form>
  <h3>Ressources</h3>
  <ul>
    <li><a href="">GeoNames Search Webservice</a> (API Documentation)</li>
    <li><a href="http://getbootstrap.com">Twitter Bootstrap</a></li>
    <li><a href="http://twitter.github.io/typeahead.js/">Twitter typeahead.js</a></li>
    <li><a href="http://twitter.github.io/hogan.js/">Twitter Hogan.js JavaScript templating</a></li>
  </ul>
</div>

script.js

var geoNamesUsername = 'uberboomtest';

/**
 * Initialize typeahead.js
 */
$('.typeahead').typeahead([{
	name: 'posts',
	remote: {
		url: 'http://elastic-quoc99.rhcloud.com/test/post/_search?from=0&size=3&q=%QUERY*',
		filter: function(parsedResponse) {
			var result = [];
      $.each(parsedResponse.hits.hits, function(){
        var item = $(this)[0]._source;
        result.push({
          id: item.iD,
          author: item.author,
          value: item.name,
          name: item.name,
          content: item.content
        });
      });
			return result;
		}
	},
  cache: false,
  header: '<h4 class="suggestion-header">Posts</h4>',
	template: [
		'<p class="geo-name">{{name}}</p>',
		'<p class="geo-country">{{author}}</p>',
    '<p class="geo-country text-muted">{{content}}</p>'
	].join(''),
	engine: Hogan
},
{
  name: 'movies',
  remote: {
    url: 'http://elastic-quoc99.rhcloud.com/test/movies/_search?from=0&size=3&q=%QUERY*',
    filter: function(response){
      var result = [];
      $.each(response.hits.hits, function(){
        var item = $(this)[0]._source;
        result.push({
          id: item.id,
          director: item.director,
          value: item.name,
          name: item.name,
          year: item.year
        });
      });
			return result;
    }
  },
  cache: false,
  header: '<h4 class="suggestion-header">Movies<h4>',
  template: ['<a href="#"><div>',
    '<p class="geo-name">{{name}}</p>',
             '<p class="geo-country text-muted">{{director}} - {{year}}</p>',
             '</div></a>'
    ].join(''),
  engine: Hogan
}]);


/**
 * Fix tt hint
 */
$('.typeahead').on('typeahead:initialized', function(e, data) {
	// fix for using twitter bootstrap
	var hint = $(e.target).prev('.tt-hint');
	var small = $(e.target).is('.input-sm');
	var large = $(e.target).is('.input-lg');
	if (small) {
		hint.addClass('input-sm');
	} else if (large) {
		hint.addClass('input-lg');
	} else {
		hint.addClass('input');
	}
	hint.addClass('form-control');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>
<script src="//cdn.jsdelivr.net/hogan.js/2.0.0/hogan.common.js"></script>

style.css

h3 {
  margin-top: 2em;
}

/**
 * Fix full width inputs
 */

.twitter-typeahead {
  display: block !important;
}


/**
 * Additional CSS for Twitter Bootstrap compatibility
 * by https://github.com/jharding/typeahead.js-bootstrap.css
 */

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.tt-suggestion {
  display: block;
  padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}

.suggestion-header {
  margin: 5px 5px;
  border-bottom: 1px #CCCCCC solid;
}

styles

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css" rel="stylesheet" />