63 lines
2.3 KiB
Vue
63 lines
2.3 KiB
Vue
<template>
|
|
<div class="aa-autocomplete" ref="root">
|
|
<input
|
|
class="aa-autocomplete-input"
|
|
:value="modelValue"
|
|
:placeholder="placeholder"
|
|
@input="onInput"
|
|
@keydown.down.prevent="move(1)"
|
|
@keydown.up.prevent="move(-1)"
|
|
@keydown.enter="enter"
|
|
@keydown.esc="close"
|
|
/>
|
|
<div v-show="open && list.length" class="aa-autocomplete-pop">
|
|
<div
|
|
v-for="(it, i) in list"
|
|
:key="i"
|
|
class="aa-autocomplete-item"
|
|
:class="{ 'is-active': i === active }"
|
|
@click="choose(i)"
|
|
v-html="highlight(it)"
|
|
></div>
|
|
</div>
|
|
<div v-show="open && modelValue && !list.length" class="aa-autocomplete-pop"><div class="aa-autocomplete-empty">无匹配结果</div></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: String, default: '' },
|
|
options: { type: Array, default: () => ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉', '西安', '南京', '苏州', '天津'] },
|
|
placeholder: { type: String, default: '输入关键字…' }
|
|
});
|
|
const emit = defineEmits(['update:modelValue', 'select']);
|
|
const root = ref(null);
|
|
const open = ref(false);
|
|
const active = ref(-1);
|
|
const list = ref([]);
|
|
|
|
function onInput(e) {
|
|
const q = e.target.value;
|
|
emit('update:modelValue', q);
|
|
active.value = -1;
|
|
list.value = q ? props.options.filter((d) => d.indexOf(q) >= 0) : [];
|
|
open.value = true;
|
|
}
|
|
function highlight(it) {
|
|
const q = props.modelValue.trim();
|
|
if (!q) return it;
|
|
return it.replace(new RegExp('(' + q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'g'), '<mark>$1</mark>');
|
|
}
|
|
function move(d) { open.value = true; active.value = Math.max(-1, Math.min(list.value.length - 1, active.value + d)); }
|
|
function enter() { if (active.value >= 0) choose(active.value); }
|
|
function choose(i) { emit('update:modelValue', list.value[i]); emit('select', list.value[i]); open.value = false; }
|
|
function close() { open.value = false; }
|
|
function onDoc(e) { if (root.value && !root.value.contains(e.target)) close(); }
|
|
onMounted(() => document.addEventListener('click', onDoc));
|
|
onBeforeUnmount(() => document.removeEventListener('click', onDoc));
|
|
</script>
|
|
|
|
<style src="./AutoComplete.css"></style>
|