远程搜索多选组件实现

效果展示

页面部分

<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 })}}

远程搜索多选组件实现相关推荐

闲云旅游项目开发-（第四篇：机票首页/机票搜索功能（`el-autocomplete`远程搜索组件）/moment.js的使用/日期选择组件el-date-picker）
目录相关组件介绍一机票首页布局二封装搜索组件 1. 组件布局 2.目标思路 3.步骤 3.1 基本功能 3.2 自动补全 3.3获取真正的推荐数据 3.4 添加城市代号 3.5 处理日期格式 ...
移动端基于Vant组件封装底部弹出搜索多选列表
移动端基于Vant组件封装底部弹出搜索多选列表: 效果图如下: 点击确定后赋值给表单使用到的组件:van-popup,van-search 组件页面代码:searchDataPopup.vue &l ...
layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）
始于 layui 的一个多选解决方案,前身 formSelects, 由于渲染速度慢, 代码冗余, 被放弃了.xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, ...
element中组件el-autocomplete远程搜索之精确匹配和模糊匹配
在实际开发项目中总是会遇到很多难以预测的情况, 比如el-autocomplete的远程搜索时,经常会从服务器发起搜索,然后把对象带出的相关值赋给其他标签元素,一般模糊匹配没问题,但是精确匹配会存在一 ...
vue + elemen可远程搜索select选择器的封装（思路及源码分享）
目录项目场景: 效果 1.封装下拉列表 2.页面中使用项目场景: 我有很多的Form表单,在Form表单内又有很多的select选择器,这些选择器的下拉列表都是通过后端的接口传回的数据渲染的,如果 ...
elementUI 使用 el-select 的远程搜索功能，导致数据无法回显怎么解决？
如果有同学还没用过这个功能,可以先了解下: 使用场景大部分情况下使用 el-select 的时候,el-options 中 options 的值都是后端接口给的数据,直接赋值就可以了.但是有的时候数 ...
vue + iview + select + 本地搜索或远程搜索
案例 <template><div><!-- filterable.remote.remote-method.loading.l ...
Vue01 | el-autocomplete远程搜索下拉框并实现自动填充
官网的demo献上在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据官网中的数据list都是写在loadAll()中的,而如果我们此时要用到mock的数据就要在此基础上 ...
记一次el-select远程搜索默认数据回显问题
在el-select远程搜索中会有个回显问题就是明明传入了绑定值但是却会显示不出来解决代码如下 <el-selectv-model="ruleForm.selectId" ...

远程搜索多选组件实现

效果展示

页面部分

样式部分

逻辑部分

远程搜索多选组件实现相关推荐

最新文章

热门文章