How to code an autocomplete searchbar for Youtube suggestions

[odorakel]

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
			.jsonp('http://suggestqueries.google.com/complete/search?q='+query+'&ds=yt&client=youtube&callback=JSON_CALLBACK')
			.then(function(data){
				self.lastSearchArg = query;
				
				var suggestions = data.data[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-autocomplete
	class="searchSuggest"
	md-select-item="ytItem.value"
	md-search-text="suggestorSearchText"
	md-items="ytItem in Suggestion.getSuggestions(suggestorSearchText)"
	md-selected-item-change="selectSuggestion(ytItem)"
	md-item-text="ytItem.display"
	md-min-length="2"
	md-delay="1000">
		<md-item-template>
			<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>
			</div>
		</md-item-template>
		<md-not-found>
			<span translate>
				No suggestions matching: 
			</span>
			<strong>{{suggestorSearchText}}</strong>
		</md-not-found>							
</md-autocomplete>

Does anyone habe a glue how to solve this?

Thanks,
Oliver

[odorakel]

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-header>
  <ion-searchbar
    [(ngModel)]="searchInput"
    [showCancelButton]=true
    [cancelButtonText]="Back"
    [debounce]=500
    (ionInput)="onSearchInput($event)"
    (ionCancel)="onSearchCancel($event)"
    (ionClear)="onSearchClear($event)">
  </ion-searchbar>
</ion-header>
<ion-content *ngIf="matches" fullscreen="true">
  <ion-list *ngFor="let item of matches">
    <ion-item>
      {{item.name}}, {{item.position}}
    </ion-item>
  </ion-list>
</ion-content>

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;
  border-radius:0px;
}
.searchPopover ion-searchbar .searchbar-search-icon {
  top:15px;
}
.searchPopover ion-searchbar .searchbar-input {
  padding: 12px 55px;
}
.searchPopover ion-searchbar {
  padding:0px;
  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 {
  margin-left:38px;
}

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

.searchPopover ion-popover-inner {
}

…and here’s the result:

Before scrolling:

---

After scrolling

Thanks,
Oliver

[varshil29]

Problem solved or not??

[odorakel]

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

[MikePugs]

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.

[saty932]

@varshil29
@odorakel
@MikePugs
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…

saty932/ionic2-searchbar-suggestions-above-content

Am i missing something?let me know…

[odorakel]

Thanks a lot - I will try this one.