36 lines
843 B
JavaScript
36 lines
843 B
JavaScript
|
import { ref, computed, watch } from 'vue';
|
||
|
|
||
|
export default function useSearch(items, searchProp) {
|
||
|
const enteredSearchTerm = ref('');
|
||
|
const activeSearchTerm = ref('');
|
||
|
|
||
|
const availableItems = computed(function() {
|
||
|
let filteredItems = [];
|
||
|
if (activeSearchTerm.value) {
|
||
|
filteredItems = items.value.filter(item =>
|
||
|
item[searchProp].includes(activeSearchTerm.value)
|
||
|
);
|
||
|
} else if (items.value) {
|
||
|
filteredItems = items.value;
|
||
|
}
|
||
|
return filteredItems;
|
||
|
});
|
||
|
|
||
|
function updateSearch(val) {
|
||
|
enteredSearchTerm.value = val;
|
||
|
}
|
||
|
|
||
|
watch(enteredSearchTerm, function(newValue) {
|
||
|
setTimeout(() => {
|
||
|
if (newValue === enteredSearchTerm.value) {
|
||
|
activeSearchTerm.value = newValue;
|
||
|
}
|
||
|
}, 300);
|
||
|
});
|
||
|
return {
|
||
|
enteredSearchTerm,
|
||
|
availableItems,
|
||
|
updateSearch
|
||
|
};
|
||
|
}
|