uniapp 使用uni-combox组合框实现远程搜索功能

2023-11-17

一、绑定属性

<uni-combox :candidates="candidates" placeholder="请选择序列名称(支持搜索)" @input="change"
					v-model="form.materialName" @blur="onblur">
</uni-combox>
  1. candidates 属性列表
  2. @input 组合框输入事件
  3. @blur 组合框失焦事件
    @blur事件在官方文档中不存在,需自行修改uni-combox组件
    在这里插入图片描述

二、js方法

data() {
			return {
			    //原列表
				typeList: [],
				//处理后的列表
				candidates: [],
				form: {
					materialName: "",
					materialIndex: 0,
					materialId: "",
					proMaterialContent: ""
				},
				query: {
					pageSize: 10,
					pageNum: 1,
					materialName: ''
				},
			}
		},
methods: {
	       //获取后台数据
			getTypeList() {
				this.candidates = []
				getTypeList(this.query).then(res => {
					if (res.code == 200) {
						
						this.typeList = res.rows
						if (res.rows.length > 0) {
							res.rows.forEach(item => {
								this.candidates.push(item.materialName)
							})
						}
					}
				})
			},
			onblur(e) {
				if (this.form.materialId == "") {
					this.form.materialName = ""
					this.query.materialName = ""
				}

			},
			change(e) {
				let flag = this.typeList.find(item => {
					return item.materialName == e
				})
				if (flag) {
					this.form.materialId = flag.id
				} else {
					this.form.materialId = ""
					this.query.materialName = e
					this.getTypeList()
				}


			},
 }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp 使用uni-combox组合框实现远程搜索功能 的相关文章

随机推荐

  • docker笔记(二)之镜像加速器

    国内从 Docker Hub 拉取镜像有时会遇到困难 此时可以配置镜像加速器 国内很多云服务商都提供了国内加速器服务 例如 阿里云加速器 点击管理控制台 gt 登录账号 淘宝账号 gt 右侧镜像中心 gt 镜像加速器 gt 复制地址 网易云
  • 从原理到应用,人人都懂的 ChatGPT 指南

    如何充分发挥ChatGPT潜能 成为了众多企业关注的焦点 但是 这种变化对员工来说未必是好事情 IBM计划用AI替代7800个工作岗位 游戏公司使用MidJourney削减原画师人数 此类新闻屡见不鲜 理解并应用这项新技术 对于职场人来说重
  • Pytorch实现多特征输入的分类模型 代码实操

    初学者学习Pytorch系列 第一篇 Pytorch初学简单的线性模型 代码实操 第二篇 Pytorch实现逻辑斯蒂回归模型 代码实操 第三篇 Pytorch实现多特征输入的分类模型 代码实操 文章目录 初学者学习Pytorch系列 前言
  • 基于Java发起HTTP请求实现文件的上传

    需要用到的包
  • wandb快速上手、使用心得(超好用的Tensorboard高替品)

    这里写目录标题 1 wandb介绍 2 快速上手 3 使用心得 3 1 一张图展示两条线 3 2 想要科学上网和wandb一起使用 离线使用 3 3 未完待续 1 wandb介绍 wandb地址 wandb Wandb Weights Bi
  • 构造一个死循环的shell脚本

    while do done
  • springBoot service 事务注解@Transactional不起作用的解决

    在springBoot使用事物时 发现事务并没有正常执行 没有进行回滚 Transactional public void add String companyName String name throws MyException comp
  • C++模板全特化(具体化)与偏特化(部分具体化)详解(转)

    1 模板简介 模板就是实现代码重用的一种机制 它可以实现类型参数化 即把类型定义为参数 从而实现了真正的代码可重用性 模板编程和函数重载可以实现C 静态多态 也叫编译时多态 模版可以分为两类 一个是 函数模版 另一个是 类模版 2 模板特化
  • 利用Vulnhub复现漏洞 - OpenSSH 用户名枚举漏洞(CVE-2018-15473)

    OpenSSH 用户名枚举漏洞 CVE 2018 15473 Vulnhub官方复现教程 漏洞原理 复现过程 启动环境 漏洞复现 CVE 2018 15473 Exploit Vulnhub官方复现教程 https vulhub org e
  • Option类型:C++(std::optional)、Rust(Option)、Go(gob.OptionalValue)

    当我们在实现一个函数 fn point 该函数会有返回的point指针有可能是null 那么函数的调用者必须显示的进行判断 避免出现null point引发的程序崩溃 Rust作为强调系统安全的语言 自然是从语言层面上给予了开发者莫大的帮助
  • 2020年集五福攻略:集五福不再难搞

    2020年的春节就要到了 让人期待的支付宝集五福活动也会随之而来 那么 2020支付宝集五福什么时候开始 支付宝的集福卡活动不是第一届了 2017年的支付宝集五福是1月18日开始 2018年的支付宝集五福是2月6日开始 2019年支付宝集五
  • XSS攻击实战

    一 XSS原理与分类 原理 XSS攻击全程跨站脚本攻击 恶意攻击者往Web页面里插入恶意Script代码 当用户浏览该页之时 嵌入其中Web里面的Script代码会被执行 从而达到恶意攻击用户的目的 与SQL注入类似 XSS也是利用提交恶意
  • 每个程序员都该学习的5种开发语言,不可错过!

    每个公司都喜爱精通多种编程语言并且多才多艺的程序员 一个既能很麻利地写脚本 也能编写复杂的Java程序的程序员 确实相当有价值 所以实际上 对于高级开发者来说 学习不止一种编程语言 几乎就是必然的要求 目前而言 面试官越来越看重那些拥有多种
  • 抢小米手机K40脚本

    声明 基于 puppeteer js 仅辅助更快操作浏览器 本脚本仅供米粉购买小米系列产品 请勿充当黄牛 代码地址 https github com shunyue1320 buy xiaomi
  • 应用层 —— 电子邮件

    一 电子邮件的信息格式 二 系统结构 三 SMTP
  • Meta标签中的apple-mobile-web-app-capable属性及含义

    这meta的作用就是删除默认的苹果工具栏和菜单栏 content有两个值 yes 和 no 当我们需要显示工具栏和菜单栏时 这个行meta就不用加了 默认就是显示
  • 内置数据库

    DERBY 完全使用java 开发 可以在任何存在合适的 Java 虚拟机的地方运行 不适用于在其他编程语言内置使用 HSQLDB Java内置的数据库 非常适合在用于快速的测试和演示的Java程序中 无需独立安装数据库 HSQLDB有三种
  • 编译原理LL(1)文法之提取左公因子,消除左递归

    在判断LL 1 文法是否符合的时候 需要判断LL 1 文法是否存在左公因子 和左递归的情况 以下给出相应的判断方法以及通过提取左公因子和消除左递归使非LL 1 文法转换为LL 1 法的方法 第一种情况 存在左公因子 解决方法 提取左公因子
  • 恶魔奶爸沟通课

    01社交本质上是精力问题 1 神奇女侠式 双脚分开 与肩同宽 挺胸抬头 双手叉腰 站立120秒 让自己舒服很多 2 深呼吸 3 适度运动 每周160分钟 4 睡眠 晚上10点半睡觉 早上6点起床 5 不要久坐 坐20分钟起来走走 哪怕30秒
  • uniapp 使用uni-combox组合框实现远程搜索功能

    目录 一 绑定属性 二 js方法 一 绑定属性