vue 搜索框

 效果

1. 创建搜索组件：
   • 在Vue项目中，首先需要创建一个搜索组件。这个组件通常包含一个输入框和一个搜索按钮。
   • 使用v-model指令将输入框与组件的数据属性（如searchKeyword）进行双向绑定，以便获取用户输入的关键词。
2. 处理搜索逻辑：
   • 为搜索按钮绑定一个点击事件处理函数（如handleSearch），该函数负责在用户点击时触发搜索操作。
   • 在事件处理函数中，可以使用Vue的异步请求库（如Axios）向后端服务器发送搜索请求，并将用户输入的关键词作为请求参数。
3. 展示搜索结果：
   • 后端服务器处理搜索请求后，将返回搜索结果。
   • 在Vue组件中，可以使用计算属性（computed properties）或观察者（watchers）来监听搜索结果的变化，并相应地更新组件的模板以展示搜索结果。
4. 优化搜索体验：
   • 可以为搜索组件添加一些辅助功能，如自动完成、搜索历史记录等，以提升用户体验。
   • 使用正则表达式或模糊匹配算法来实现更复杂的搜索逻辑。

<div class="top-wrapper">
			<div class="search el-input el-input--suffix">
				<input
					type="text"
					autocomplete="off"
					placeholder="输入指标名称搜索"
					class="el-input__inner"
					v-model="searchKeyword"
					@keydown.enter="search"
					@change="searchChange"
				/>
				<span class="el-input__suffix">
					<span class="el-input__suffix-inner">
						<el-icon @click="search"><Search /></el-icon>
					</span>
				</span>
			</div>
		</div>

.top-wrapper {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 16px;
}

.top-wrapper .search {
	width: 250px;
}
.el-input .el-input__suffix .el-input__icon {
	line-height: 32px;
}

.el-input__icon {
	height: 100%;
	width: 25px;
	text-align: center;
	transition: all 0.3s;
	line-height: 40px;
}
.el-input__suffix {
	right: 5px;
	transition: all 0.3s;
	pointer-events: none;
}

.el-input__prefix,
.el-input__suffix {
	position: absolute;
	top: 0;
	-webkit-transition: all 0.3s;
	height: 100%;
	color: #c0c4cc;
	text-align: center;
}

.el-input__suffix-inner {
	pointer-events: all;
}

.el-input__icon:after {
	content: "";
	height: 100%;
	width: 0;
	display: inline-block;
	vertical-align: middle;
}
.top-wrapper {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 16px;
}

.top-wrapper .search {
	width: 250px;
}

.el-input {
	position: relative;
	font-size: 14px;
}

.el-input__inner {
	-webkit-appearance: none;
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	box-sizing: border-box;
	color: #606266;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	outline: 0;
	padding: 0 15px;
	transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	width: 100%;
	font-size: inherit;
	-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.el-dialog .el-dialog__body .el-input .el-input__inner {
	padding-left: 8px;
	color: #333;
}

.el-input .el-input__inner {
	height: 32px;
	line-height: 32px;
	border-radius: 2px;
}

const columnsList = ref([]);
const searchKeyword = ref<string>("");
const keyword = ref<string>("");
const leftGroups = ref([]);
const rightGroups = (groupName) => {
	return columns
		.filter((item) =>
			searchKeyword.value
				? item.groupName == groupName && item.label.indexOf(searchKeyword.value) > -1
				: item.groupName == groupName
		)
		.sort((a, b) => a.orderNum - b.orderNum);
};
const searchChange = () => {
	columnsList.value = columns.filter((item) => item.label.indexOf(searchKeyword.value) > -1);
};
const search = () => {
	columnsList.value = columns.filter((item) => item.label.indexOf(searchKeyword.value) > -1);
};
const lockList = ref([]);
onMounted(() => {
	columnsList.value = columns;
});
watchEffect(() => {
	if(searchKeyword.value){
		columnsList.value = columns.filter((item) => item.label.indexOf(searchKeyword.value) > -1);
	}
	if(!searchKeyword.value){
		columnsList.value = columns;
	}
	drag.value = columns.filter((item) => item.checked && !item.disabled);
	lockList.value = columns
		.filter((item) => item.disabled)
		.sort((a, b) => a.orderNum - b.orderNum);
	const seen = new Set();
	leftGroups.value = columnsList.value
		.map((item) => {
			return {
				prop: item.prop,
				groupName: item.groupName,
				checked: false,
				orderNum: item.orderNum,
				active: item.active ? item.active : false
			};
		})
		.filter((item) => {
			if (!seen.has(item.groupName)) {
				seen.add(item.groupName);
				return true;
			}
			return false;
		});
});