How to code an autocomplete searchbar for Youtube suggestions

Hey folks,

I would like to code a directive of <ion-searchbar> that is going to talk to the Youtube API showing you the suggestions of the given keyword.

I already did this for angular-material, but I don’t know how to start in Ionic2. My former code (service) looked like this:

app.service('SuggestionService', function($q, $http) {
	var self = this;

	this.lastSearchArg = null;
	this.getSuggestions = function(query) {
		return $http
				self.lastSearchArg = query;
				var suggestions =[1].map( function (state) {
					return {
						value: state[0].toLowerCase(),
						display: state[0],
						source: 0
				var allsuggestions = [];
				allsuggestions.push({"value":query.toLowerCase(),"display":query,"source": 1});
				allsuggestions = allsuggestions.concat(suggestions);
				return allsuggestions;


And this is what I used inside my partials:

	md-items="ytItem in Suggestion.getSuggestions(suggestorSearchText)"
			<div layout="row" layout-align="start center">
				<i class="material-icons" style="color:#9E9E9E; margin-right:5px;">arrow_forward</i>
				<span flex md-highlight-text="suggestorSearchText" md-highlight-flags="^i">{{ytItem.display}}</span>
			<span translate>
				No suggestions matching: 

Does anyone habe a glue how to solve this?


Hey folks,

…well I was a bit creative using a popover with a searchbar and a content area, that is filled with the search results, but wihtin my popup the containing the should always stay on top, but it’s been scrolling with the .

How can I fix this CSS issues?

Here’s the source of my popover template:

<ion-content *ngIf="matches" fullscreen="true">
  <ion-list *ngFor="let item of matches">
      {{}}, {{item.position}}

And here’s my custom CSS for this template - not nice, but working fine so far.

.search-popover {
  position:relative !important;

.searchPopover .popover-content {
  top: 0px !important;
  left: 0px !important;
  transform-origin: right top 0px;
  transform: scale(1);
  right: 0px !important;
  width: 100% !important;
  max-height: 55% !important;
  min-height: 55px !important;
.searchPopover ion-searchbar .searchbar-search-icon {
.searchPopover ion-searchbar .searchbar-input {
  padding: 12px 55px;
.searchPopover ion-searchbar {
  top:0 !important;
  z-index:999 !important;
.searchPopover ion-searchbar  * {
  border:0px !important;
  border-radius:0px !important;
  border-shadow:0px !important;
.searchPopover ion-backdrop {
  opacity:0.6 !important;

.searchPopover ion-content {
  /* margin-top:55px !important; */

.searchPopover ion-list .item-inner {

.searchPopover ion-list { margin:0px; }
.searchPopover [padding] { padding: 0px; }

.searchPopover ion-popover-inner {

…and here’s the result:

Before scrolling:

After scrolling


Problem solved or not??

No, not yet :frowning: But I was also working on other issues inbetween.

I would like to add an autocomplete textbox to my ionic project.

I’m new to ionic and progressing slowly so if you finish getting this working properly I would love to see your finished code.

I know this is too late but it may helps some one

with out search suggestions…

with search suggestions…

Even if i scroll the content search suggestions will be always there they don’t scroll with content…

I made a repo take a look…

Am i missing something?let me know…

Thanks a lot - I will try this one.

1 Like