远程搜索多选组件实现

效果展示

页面部分

<div class="m-section__content">
    <div id="dropdown" class="m-dropdown m-dropdown--inline m-dropdown--arrow posi_re" data-dropdown-toggle="click" data-dropdown-persistent="true" aria-expanded="true">
      <input type="text" readonly class="m-dropdown__toggle btn dropdown-toggle select-drop-down dropdown_input pad_r_30" placeholder="请选择" [(ngModel)]="showResult"/>
      <span class="btn dropdown-toggle posi_ab point_none"></span>
      <!-- <span *ngIf="showResult" (click)="clear()" class="close posi_ab">
        <i class="la la-close"></i>
      </span> -->
      <div class="m-dropdown__wrapper">
        <span class="m-dropdown__arrow m-dropdown__arrow--left"></span>
        <div class="m-dropdown__inner">
          <div class="m-dropdown__body">
            <div class="m-dropdown__content">
              <div class="search">
                <input type="text" (keyup.enter)="search()" trim class="form-control" placeholder="请输入关键字" [(ngModel)]="searchValue"/>
              </div>
              <div *ngIf="resultDataList.length" class="search_content">
                <div class="item_sel"  *ngFor="let item of resultDataList" (click)="selectedItem(item)">
                    <div class="base_sel" [ngClass]="{'selected': item.isSelected}">
                        <div class="flex-bet">
                           <div>{{item.funderName}}</div>
                           <div *ngIf="item.isSelected">√</div>
                        </div>
                    </div>
                </div>
              </div>
              <div class="load_btn" *ngIf="loading"><button type="button" class="btn btn-secondary m-loader m--font-light mar_top_12 border_none"></button></div>
              <div *ngIf="!resultDataList.length&&!loading&&isSearch" class="search_content">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  

样式部分

.close {
    right: 24px;
    top: 3px;
  }
  .close i {
    font-size: 1.1rem;
  }
  
  .nav-link.dropdown-toggle:after, .btn.dropdown-toggle:after {
    position: absolute;
    top: 16px;
    right: 62px;
  }
  
  .posi_ab {
    position: absolute;
    top: -10%;
    right: -12%
  }
  
  .dropdown_input {
    text-align: left;
    font-size: 12px;
    padding: 0 10px;
  }
  
  .form-control:focus {
    border-color: #3196FA;
  }
  
  .search_content {
    font-size: 12px;
    margin-top: 5px;
    max-height: 400px;
    overflow-y: auto;
  }
  
  .item_sel {
    cursor: pointer;
    .base_sel{
        padding: 5px 5px;
    }
  }
  
  .item_sel:hover {
    background-color: #eaeaea;
  }
  
  .point_none {
    pointer-events: none;
  }
  
  .load_btn {
    margin: 5px auto;
    width: 28px;
  }
  
  .border_none {
    border: none;
  }
  
  .pad_r_30 {
    padding-right: 30px;
  }
  .m-section__content {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    height: 100%;
  }
  .m-section__content .m-dropdown__toggle {
    display: block;
    height: 100%;
    width: 100%;
  }
  .m-dropdown.m-dropdown--inline {
    display: inline-block;
    height: 100%;
    width: 100%;
}
  .m-dropdown__wrapper {
    min-width: 100%;
  }
.selected{
    // background-color: #eaeaea;
    color: #3196FA;
}
.flex-bet{
    display: flex;
    justify-content: space-between;
}

逻辑部分

import { Component, EventEmitter, OnInit, Output, Input } from '@angular/core';
import { LoggerFactory } from 'app/core/logger-factory.service';
import { Logger } from 'app/core/logger.service';
import { Http } from '@angular/http';
declare const $: any;
@Component({
  selector: 'app-multiple-choice',
  templateUrl: './multiple-choice.component.html',
  styleUrls: ['./multiple-choice.component.scss']
})
export class MultipleChoiceComponent implements OnInit {
    @Input()callBack:Function;
    @Output() action = new EventEmitter();
    log: Logger;
    loading: boolean = false;
    showResult: Array<any> = []; // 选择结果集
    searchValue: string; // 输入搜索关键字
    resultDataList: Array<any> = []; // 搜索结果集
    isSearch: boolean = false; // 是否已搜索
  
    constructor(
      private loggerFactory: LoggerFactory,
      private http:Http
      
    ) {
      this.log = this.loggerFactory.getLogger();
    }
  
    ngOnInit() {
      this.resultDataList = [
        {
            "funderId": "PFxxx1",
            "funderCode": "YX",
            "funderName": "上海易鑫融资租赁有限公司1",
            isSelected:false
        },
        {
            "funderId": "PFxxx2",
            "funderCode": "YX",
            "funderName": "上海易鑫融资租赁有限公司2",
            isSelected:false
        },
        {
            "funderId": "PFxxx3",
            "funderCode": "YX",
            "funderName": "上海易鑫融资租赁有限公司3",
            isSelected:false
        },{
            "funderId": "PFxxx4",
            "funderCode": "YX",
            "funderName": "上海易鑫融资租赁有限公司4",
            isSelected:false
        }
      ]
    }
    // 搜索
    search() {
      if (this.searchValue.trim()) {
        this.isSearch = false;
        // this.loading = true;
        this.callBack(this.searchValue).subscribe(
            (response:any)=>{
                console.log(response)
            },
            (error:any)=>{
                console.log(error)
            }
        )
        this.resultDataList = [
            {
                "funderId": "PFxxx3",
                "funderCode": "YX",
                "funderName": "上海易鑫融资租赁有限公司3",
                isSelected:false
            },{
                "funderId": "PFxxx6",
                "funderCode": "YX",
                "funderName": "上海易鑫融资租赁有限公司6",
                isSelected:false
            },{
                "funderId": "PFxxx7",
                "funderCode": "YX",
                "funderName": "上海易鑫融资租赁有限公司7",
                isSelected:false
            }
        ];
        this.resultDataList.forEach((r:any,rindex:number)=>{
            this.showResult.forEach((s:any,sindex:number)=>{
                if(r.funderId===s.funderId){
                    r.isSelected = true;
                    this.showResult[sindex]=this.resultDataList[rindex];
                }
            })
        })
        this.action.emit(this.showResult);
       
      } else {
        this.log.warn('请输入关键字');
      }
    }
    // 选择
    selectedItem(item: any) {
      item.isSelected = !item.isSelected;
      if(item.isSelected){
        this.showResult.push(item)
      }else{
        this.showResult.splice(this.showResult.findIndex((sitem)=>{
            return sitem.funderId === item.funderId;
        }),1);
      }
      this.action.emit(this.showResult);
    //   $('.m-dropdown.m-dropdown--open').each(function () {
    //     $(this)
    //       .mDropdown()
    //       .hide();
    //   });
    }
    // 清空
    clear() {
    //   this.showResult = [];
    //   this.action.emit({ mortgageeCustId: undefined, mortgageeCustLoginName: undefined })
    }

}