The instance is in the background with MongoDB + node. JS's Restful API service. At the moment, just put in some code snippets, the entire demo code will be uploaded to GitHub later, the link will be updated in this article after uploading.
1. Background implementation:
' Use strict ';
var mongoose = require (' Mongoose '),
Community = Mongoose.model (' Community ');
var Communityctrl = require ('.. /controllers/communitycontroller ');
Exports.find_communities = function (req, res) {
Community.find ({name:communityCtrl.fuzzyMatch (req.query.name)}, function (err, Task) {
if (ERR)
Res.send (ERR);
Res.json (Task);
});
};
Using regular expression fuzzy matching
Exports.fuzzymatch = function (source) {
Let regexsearchstring = ' \.* ' + source + ' \.* ';
return new RegExp (regexsearchstring, ' I ');
}
2. Front-End 2.1 Restserice.ts call back
Import {HttpClient, httpparams} from ' @angular/common/http ';
Import {AppSettings} from '. /.. /settings/app-settings ';
Import {injectable} from ' @angular/core ';
@Injectable ()
Export Class Autocompleteserviceprovider {
apiurl:string;
Constructor (public http:httpclient) {
This.apiurl = Appsettings.getapiserviceurl ();
}
GetResults (keyword) {
CONST PARAMS = new Httpparams (). Append ("name", keyword);
return new Promise (resolve = {
This.http.get (This.apiurl + '/findcommunity ', {params:params}). Subscribe (data = {
Resolve (data);
}, Err = {
Console.log (' findcommunity ' + err.message);
});
});
}
}
2.2 Front-end pages
community-select.html code, use the Ion-searchbar component
< Ion-searchbar (ioninput) = "Searchtextchange ($event)" [placeholder]= "Promptmsg"
Name= "SearchQuery" [(Ngmodel)]= "searchQuery" #fieldsearch = "Ngmodel" Required > </ion-searchbar>
Community-select.ts code Snippets.
Hidelist:boolean;
Coms:any;
scrollclass:string;
Searchtextchange (Ev:any) {
if (Ev.target.value.length > 1) {
This.scrollclass = "Scroll-max scroll-y";
This.hidelist = false;
This.autoService.getResults (Ev.target.value). Then (x = {
This.coms = x;
This.coms.forEach (element = {
Json.stringify (Element);
});
});
} else {
This.scrollclass = "Scroll-min";
}
}
Ionic implements a autocomplete similar to jquery