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 notifications@github.com 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 https://github.com/mikecrittenden/toogles/issues/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 notifications@github.com 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 https://github.com/mikecrittenden/toogles/issues/20#issuecomment-106607259 .