Skip to content

Instantly share code, notes, and snippets.

@overture8
Created March 21, 2013 10:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save overture8/5211981 to your computer and use it in GitHub Desktop.
Save overture8/5211981 to your computer and use it in GitHub Desktop.
A CodePen by Sergej Müller. AutoSuggest with AngularJS - Supports Chrome, Firefox, IE 10.
<h2>AutoSuggest with AngularJS</h2>
<form ng-app ng-controller="Ctrl">
<input id="query" list="items" placeholder="Search phrase" />
<datalist id="items">
<option ng-repeat="option in dataset" value="{{option[0]}}" />
</datalist>
<select ng-model="lang">
<option>EN</option>
<option>DE</option>
</select>
</form>
<script>
var Ctrl;
</script>
Ctrl = function($scope, $http) {
$scope.lang = 'EN';
$scope.dataset = [];
angular.element(
document.getElementById('query')
).bind(
'keyup',
function() {
/* Init */
var query = this.value,
lang = $scope.lang;
/* Empty? */
if ( !query ) {
return;
}
/* Fire */
$http.jsonp(
'http://www.google.de/s?q=' +
encodeURIComponent(query) +
'&hl=' +
angular.lowercase(lang) +
'&cp=1&gs_id=6&xhr=t&callback=JSON_CALLBACK'
).success(
function(data) {
$scope.dataset = data[1] || [];
}
);
}
);
}
@import "compass";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
* {
margin: 0;
padding: 0;
@include box-sizing(border-box);
}
body {
padding: 2em 0 0;
font-family: 'Open Sans', Arial, sans-serif;
text-align: center;
}
form {
margin: 1em 0 0;
input,
select {
height: 3em;
font-size: 1em;
}
input {
width: 30em;
padding: 0 0.5em;
border-radius: 5px;
}
select {
background: transparent;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment