Auto-Suggest for Search Box

[dekelcohen]

Hi,
I miss the youtube auto-suggest / auto-complete in searchbox. It is a must have for me.
I have some patch on old version of toogles
Can you can take bootstrap + angular bootstrap as dependency ?
Bootstrap typeahead integrates well with angular - very few changes.

[crittermike]

Sounds great! But unfortunately not, the app already uses Foundation.

On Thu, May 28, 2015 at 5:00 PM dekelcohen [email protected] wrote:

Hi,
I miss the youtube auto-suggest / auto-complete in searchbox. It is a must
have for me.
I have some patch on old version of toogles
Can you can take bootstrap + angular bootstrap as dependency ?
Bootstrap typeahead integrates well with angular - very few changes.

—
Reply to this email directly or view it on GitHub
#20.

[dekelcohen]

Here is the main code - as a reference, if you ever decide to take it in.
I believe the syntax is very close to angular-foundation typeahead - http://plnkr.co/edit/?p=preview
I use it every day.

//youtube.js
this.suggestQueries = function(keyword){
var url = "http://suggestqueries.google.com/complete/search";
var params = {
//hl: "vn",
ds: "yt",
client: "youtube",
hjson: "t",
cp: 1,
q: keyword,
key: "AI39si7ZLU83bKtKd4MrdzqcjTVI3DK9FvwJR6a4kB_SW_Dbuskit-mEYqskkSsFLxN5DiG1OBzdHzYfW0zXWjxirQKyxJfdkg",
format : 5,
alt : "json",
callback:"JSON_CALLBACK",
}
return $http.jsonp(url, {
params: params
}).then(function(response){
$log.log(response.data[1]);
var queries = [];
angular.forEach(response.data[1], function(item){
queries.push(item[0]);
});

    return queries;

  });
}

//list.js
$scope.suggestQueries = function(keyword) {
return youtube.suggestQueries(keyword);
}

$scope.onSuggestSelected = function ($item, $model, $label) {
$location.path('/search/' + $label)

};

//list.html

[crittermike]

This looks awesome! I will totally look at getting this in. Thanks a ton!

On Thu, May 28, 2015, 5:37 PM dekelcohen [email protected] wrote:

Here is the main code - as a reference, if you ever decide to take it in.
I believe the syntax is very close to angular-foundation typeahead -
http://plnkr.co/edit/?p=preview
I use it every day.

//youtube.js
this.suggestQueries = function(keyword){
var url = "http://suggestqueries.google.com/complete/search";
var params = {
//hl: "vn",
ds: "yt",
client: "youtube",
hjson: "t",
cp: 1,
q: keyword,
key:
"AI39si7ZLU83bKtKd4MrdzqcjTVI3DK9FvwJR6a4kB_SW_Dbuskit-mEYqskkSsFLxN5DiG1OBzdHzYfW0zXWjxirQKyxJfdkg",
format : 5,
alt : "json",
callback:"JSON_CALLBACK",
}
return $http.jsonp(url, {
params: params
}).then(function(response){
$log.log(response.data[1]);
var queries = [];
angular.forEach(response.data[1], function(item){
queries.push(item[0]);
});

return queries;

});
}

//list.js
$scope.suggestQueries = function(keyword) {
return youtube.suggestQueries(keyword);
}

$scope.onSuggestSelected = function ($item, $model, $label) {
$location.path('/search/' + $label)

};

//list.html

—
Reply to this email directly or view it on GitHub
#20 (comment)
.