Vue项目之模糊搜索

坏坏的小小夏

于 2024-08-12 16:28:19 发布

阅读量61

点赞数 1

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_47598485/article/details/141135058

版权

Input模糊搜索

例子：
在这里插入图片描述
说明：在输入框中输入内容，显示模糊搜索，文字并高亮

1. html

<view class="wishView-style-content-search-contant" v-if="textValue.length === 0 ? false : true && textShow && inputValue">
	<view class="wishView-style-content-search-contant-item" v-for="(item,cellIndex) in textValue" :key="cellIndex" @click="SearchHuaTiList(item)">
		<view class="wishView-style-content-search-contant-item-two">
			<view class="wishView-style-content-search-contant-item-text">
				<span>{{item.type_name.slice(0,item.type_name.toLowerCase().indexOf(inputValue.toLowerCase()))}}</span>
				<span style="color:#0D8D5E">{{item.type_name.slice(item.type_name.toLowerCase().indexOf(inputValue.toLowerCase()),item.type_name.toLowerCase().indexOf(inputValue.toLowerCase())+inputValue.length)}}</span>
				<span>{{item.type_name.substr(item.type_name.toLowerCase().indexOf(inputValue.toLowerCase())+inputValue.length)}}</span>
			</view>
		</view>
	</view>
</view>

2. css

.wishView-style-content-search-contant {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 67px 0px rgba(60, 63, 79, 0.1);
		border-radius: 7px;
		position: absolute;
		top: 42px;
		z-index: 2;
	}

	.wishView-style-content-search-contant-item {
		width: 100%;
		height: 45px;
		display: flex;
		justify-content: center;
		cursor: pointer;
		margin: 5px 0;
	}

	.wishView-style-content-search-contant-item-two:hover {
		background-color: #F7F8FA !important;
	}

	.wishView-style-content-search-contant-item-two {
		width: 95%;
		display: flex;
		align-items: center;
		border-radius: 4px;
	}

	.wishView-style-content-search-contant-item-icon {
		width: 13px;
		height: 13px;
		display: flex;
		align-self: center;
		margin-left: 13px;
	}

	.wishView-style-content-search-contant-item-icon image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.wishView-style-content-search-contant-item-text {
		width: auto;
		height: 17px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		display: flex;
		align-self: center;
		margin-left: 10px;
	}