fixed search
This commit is contained in:
parent
81dd531e03
commit
9aad3e3ca0
1 changed files with 42 additions and 15 deletions
|
@ -116,37 +116,56 @@ const sortSelected = ref<number>(sortItems.length - 1);
|
||||||
|
|
||||||
const loading = ref(true);
|
const loading = ref(true);
|
||||||
const companies = ref<Company[]>([]);
|
const companies = ref<Company[]>([]);
|
||||||
const filteredCompanies = ref<(Company & { score?: number })[]>([]);
|
const tags = ref<string[]>([]);
|
||||||
|
const tickers = ref<string[]>([]);
|
||||||
|
|
||||||
|
type CompanyWithScore = Company & { score?: number }
|
||||||
|
|
||||||
|
const filteredCompanies = ref<CompanyWithScore[]>([]);
|
||||||
const selected = reactive<string[]>([]);
|
const selected = reactive<string[]>([]);
|
||||||
const searchText = ref("");
|
const searchText = ref("");
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
let fuse: Fuse<Company> | undefined = undefined;
|
let fuse: Fuse<Company> | undefined = undefined;
|
||||||
|
|
||||||
const sortCompanies = () => {
|
const sortCompanies = (companiesToSort: CompanyWithScore[]) => {
|
||||||
const sorter = sortItems[sortSelected.value]!;
|
const sorter = sortItems[sortSelected.value]!;
|
||||||
if (sorter.sortBy !== undefined) {
|
if (sorter.sortBy !== undefined) {
|
||||||
const key: keyof Company = sorter.sortBy;
|
const key: keyof Company = sorter.sortBy;
|
||||||
filteredCompanies.value = filteredCompanies.value.sort(naturalOrder(c => c[key]))
|
filteredCompanies.value = companiesToSort.sort(naturalOrder(c => c[key]))
|
||||||
|
} else {
|
||||||
|
filteredCompanies.value = companiesToSort.sort(naturalOrder(c => c.score ?? c.ticker));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const search = debounce(() => setTimeout(() => {
|
const search = debounce(() => setTimeout(() => {
|
||||||
filteredCompanies.value = fuse!.search(searchText.value).map(e => ({ ...e.item, score: e.score }))
|
let companiesToSort: CompanyWithScore[];
|
||||||
sortCompanies();
|
if (tags.value.indexOf(searchText.value) !== -1) {
|
||||||
|
companiesToSort = companies.value.filter(e => e.tags.indexOf(searchText.value) !== -1);
|
||||||
|
} else {
|
||||||
|
const ticker = searchText.value.trim().toUpperCase();
|
||||||
|
if (tickers.value.indexOf(ticker) !== -1) {
|
||||||
|
companiesToSort = [companies.value.find(c => c.ticker == ticker)!];
|
||||||
|
} else {
|
||||||
|
companiesToSort = fuse!.search(searchText.value).map(e => ({ ...e.item, score: e.score }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
sortCompanies(companiesToSort);
|
||||||
}, 0), 1000);
|
}, 0), 1000);
|
||||||
|
|
||||||
watch(sortSelected, () => sortCompanies());
|
const searchAll = debounce(() => {
|
||||||
|
sortCompanies(companies.value);
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
watch(sortSelected, () => {
|
||||||
|
sortCompanies(filteredCompanies.value)
|
||||||
|
});
|
||||||
|
|
||||||
watch(searchText, () => {
|
watch(searchText, () => {
|
||||||
if (!fuse) return;
|
if (!fuse) return;
|
||||||
if (searchText.value === '') {
|
|
||||||
filteredCompanies.value = companies.value;
|
|
||||||
sortCompanies();
|
|
||||||
loading.value = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
|
if (searchText.value === '') {
|
||||||
|
searchAll();
|
||||||
|
} else {
|
||||||
search();
|
search();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -171,8 +190,16 @@ watch(filteredCompanies, () => loading.value = false);
|
||||||
|
|
||||||
getCompanies().then(cs => {
|
getCompanies().then(cs => {
|
||||||
companies.value = cs;
|
companies.value = cs;
|
||||||
const myIndex = Fuse.createIndex(['ceo', 'company name', 'description', 'sector', 'tags', 'ticker', 'website'], cs);
|
tags.value = cs.flatMap(c => c.tags);
|
||||||
fuse = new Fuse(cs, { threshold: 0.5, ignoreLocation: true }, myIndex);
|
tickers.value = cs.map(c => c.ticker);
|
||||||
|
const myIndex = Fuse.createIndex([
|
||||||
|
{ name: 'company name', weight: 2 },
|
||||||
|
'sector',
|
||||||
|
'tags',
|
||||||
|
{ name: 'ticker', weight: 10 },
|
||||||
|
'website'
|
||||||
|
], cs);
|
||||||
|
fuse = new Fuse(cs, { threshold: 0.6 }, myIndex);
|
||||||
filteredCompanies.value = cs;
|
filteredCompanies.value = cs;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Reference in a new issue