ionic 实现类似于JQuery的AutoComplete

Posted 2020-11-20 caiyaming

该实例以 MongoDB + Node.js  的 Restful API Service为后台。    目前仅仅放一些代码片段，后期会将整个Demo Code上传到GitHub，待上传之后，会在本文中更新链接。

1. 后台实现：

‘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);

  });

};

  //使用正则表达式模糊匹配

  exports.fuzzyMatch =    function(source) {

    let regexSearchString = ‘.*‘ + source + ‘.*‘;

    return new RegExp(regexSearchString, ‘i‘);

  }

2.前端

2.1  RestSerice.ts 中调用后台 

 

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  前端页面

community-select.html 代码中，使用 ion-searchbar 组件

< ion-searchbar (ionInput)="searchTextChange($event)" [placeholder]="promptmsg"

name="searchQuery" [(ngModel)]="searchQuery" #fieldsearch="ngModel" required > </ion-searchbar>

community-select.ts 代码片段。

  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";

    }

  }