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

一、绑定属性

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


			},
 }