新建Input.vue
定义input框及相关事件
<input
type="text"
v-model="query"
@input="onInput"
@blur="hideSuggestions"
@focus="onInput"
/>
@input输入事件、@blur失去焦点、@focus获取焦点
//当输入内容时才显示ul内容
const onInput = () => {
showSuggestions.value = query.value.trim() !== '';
};
const hideSuggestions = () => {
setTimeout(() => {
showSuggestions.value = false;
}, 200); // 延迟隐藏以允许选择建议
};
定义组件属性
const props = defineProps<{
suggestions: string[];
}>();
ul标签是否显示
const showSuggestions = ref(false);
<ul
v-if="showSuggestions && filteredSuggestions.length"
class="suggestions"
>
<li
v-for="(suggestion, index) in filteredSuggestions"
:key="index"
@mousedown="selectSuggestion(suggestion)"
>
{{ suggestion }}
</li>
</ul>
进行筛选
const filteredSuggestions = computed(() => {
if (query.value.trim() === '') {
return [];
}
return props.suggestions.filter((suggestion) =>
suggestion.toLowerCase().includes(query.value.toLowerCase())
);
});
选中内容
//选中内容
const selectSuggestion = (suggestion: string) => {
query.value = suggestion;
showSuggestions.value = false;
};
其他组件使用
引入
import AutoInput from './components/Input.vue';
使用
const suggestionsList = [
'apple',
'banana',
'orange',
'grape',
'pineapple',
'mango',
'strawberry',
];
<div>
<AutoInput :suggestions="suggestionsList"></AutoInput>
</div>
效果
完整代码
Input.vue
<template>
<div class="autocomplete">
<input
type="text"
v-model="query"
@input="onInput"
@blur="hideSuggestions"
@focus="onInput"
/>
<ul
v-if="showSuggestions && filteredSuggestions.length"
class="suggestions"
>
<li
v-for="(suggestion, index) in filteredSuggestions"
:key="index"
@mousedown="selectSuggestion(suggestion)"
>
{{ suggestion }}
</li>
</ul>
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
const props = defineProps<{
suggestions: string[];
}>();
const query = ref('');
const showSuggestions = ref(false);
const filteredSuggestions = computed(() => {
if (query.value.trim() === '') {
return [];
}
return props.suggestions.filter((suggestion) =>
suggestion.toLowerCase().includes(query.value.toLowerCase())
);
});
//当输入内容时才显示ul内容
const onInput = () => {
showSuggestions.value = query.value.trim() !== '';
};
const hideSuggestions = () => {
setTimeout(() => {
showSuggestions.value = false;
}, 200); // 延迟隐藏以允许选择建议
};
//选中内容
const selectSuggestion = (suggestion: string) => {
query.value = suggestion;
showSuggestions.value = false;
};
</script>
<style scoped>
.autocomplete {
position: relative;
display: inline-block;
width: 100%;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
//设置垂直滚动条
.suggestions {
position: absolute;
border: 1px solid #ddd;
border-top: none;
z-index: 1000;
background-color: #fff;
width: 100%;
box-sizing: border-box;
max-height: 150px;
overflow-y: auto;
}
.suggestions li {
padding: 8px;
cursor: pointer;
}
//鼠标悬停改变背景颜色
.suggestions li:hover {
background-color: #f0f0f0;
}
li {
list-style-type: none;
}
</style>
其他组件
<script setup lang="ts">
import AutoInput from './components/Input.vue';
const suggestionsList = [
'apple',
'banana',
'orange',
'grape',
'pineapple',
'mango',
'strawberry',
];
</script>
<template>
<div>
<AutoInput :suggestions="suggestionsList"></AutoInput>
</div>
</template>
<style scoped></style>