I’m using ionic2 and the ng2-autocompleter plugin to create a typeahead input to dynamically query my database and return results as the user types. Here is an example using the ng2-autocompleter plugin to fetch remote data. Here are two other examples just ctrl+f dataRemote
and ctrl+f dataRemote2
. This is the error I’m getting "You provided 'null' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable"
. The documentation on the github page states that the Autocomplete list data source can be an array of strings or a URL that results in an array of strings or a CompleterData object
but URL that returns JSON doesn’t work.
protected jobSiteDataService: CompleterData;
protected jobSiteSearchStr: string;
protected jobSiteValue: string;
constructor(public navCtrl: NavController, private completerService: CompleterService, public modalCtrl: ModalController) {
this.jobSiteDataService = completerService.remote(
"www.exampleLink.com/getdata.php",
"province",
"province");
}
public onJobSiteSelected(selected: CompleterItem) {
if (selected) {
this.jobSiteValue = selected.title;
this.disableJobSite = true;
} else {
//this.jobSiteValue = "";
}
}
the completer itself
<ng2-completer name="jobSiteCompleter"
[inputId]="'jobSiteSearchInput'"
[datasource]="jobSiteDataService"
[(ngModel)]="jobSiteSearchStr"
(selected)="onJobSiteSelected($event)"
[minSearchLength]="2"
[placeholder]="'Search'"
[disableInput]="disableJobSite"
#colorRequired="ngModel">
</ng2-completer>
I am searching my own remote database using PHP, PDO, and MySQL. I fetch the data and than encode it as json using php like this
$stmt = $pdo->query('SELECT * FROM siteData');
$resultJSON = json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
header('Content-Type: application/json');
echo ($resultJSON);
Screenshot of JSON output:
HTTP request info