diff --git a/src/components/AppMap.ts b/src/components/AppMap.ts index 9d71532..f36856f 100644 --- a/src/components/AppMap.ts +++ b/src/components/AppMap.ts @@ -236,7 +236,7 @@ export default defineComponent({ markerGroups: new Map(), - searchThrottler: ui.late<() => void>(), + searchThrottler: ui.late<(id: string) => void>(), searchResultMarkers: [] as MapMarkers.MapMarkerSearchResult[], hardModeExcludeSet: ui.late(), @@ -321,7 +321,7 @@ export default defineComponent({ if (this.$route.query.q) { this.searchQuery = this.$route.query.q.toString(); - this.search(); + this.searchOnInput(); this.switchPane('spane-search'); } @@ -1023,7 +1023,7 @@ export default defineComponent({ }, initSearch() { - this.searchThrottler = debounce(() => this.search(), 200); + this.searchThrottler = debounce((query: string) => this.search(query), 200); this.map.registerZoomCb(() => { for (const group of this.searchGroups) @@ -1045,7 +1045,7 @@ export default defineComponent({ searchOnInput() { this.searching = true; - this.searchThrottler(); + this.searchThrottler(this.searchQuery); }, searchSetLink() { @@ -1061,13 +1061,13 @@ export default defineComponent({ searchOnAdd() { this.searchAddGroup(this.searchGetQuery()); this.searchQuery = ''; - this.search(); + this.searchOnInput(); }, searchOnExclude() { this.searchAddExcludedSet(this.searchGetQuery()); this.searchQuery = ''; - this.search(); + this.searchOnInput(); }, async searchAddExcludedSet(query: string, label?: string): Promise { @@ -1100,7 +1100,7 @@ export default defineComponent({ searchViewGroup(idx: number) { const group = this.searchGroups[idx]; this.searchQuery = group.query; - this.search(); + this.searchOnInput(); }, searchRemoveGroup(idx: number) { @@ -1115,20 +1115,33 @@ export default defineComponent({ group.update(SearchResultUpdateMode.UpdateVisibility, this.searchExcludedSets); }, - async search(): Promise { + async search(searchQuery: string): Promise { this.searching = true; this.searchResultMarkers.forEach(m => m.getMarker().remove()); this.searchResultMarkers = []; + let searchResults: ObjectMinData[] = [] + let searchLastSearchFailed = false; + const query = this.searchGetQuery(); + // Async - start interuptable try { - this.searchResults = await MapMgr.getInstance().getObjs(this.settings.mapType, this.settings.mapName, query, false, this.MAX_SEARCH_RESULT_COUNT); - this.searchLastSearchFailed = false; + if(query.trim().length) { + searchResults = await MapMgr.getInstance().getObjs(this.settings.mapType, this.settings.mapName, query, false, this.MAX_SEARCH_RESULT_COUNT); + searchLastSearchFailed = false; + } } catch (e) { - this.searchResults = []; - this.searchLastSearchFailed = true; + searchResults = []; + searchLastSearchFailed = true; + } + // Async - end interuptable (this.searchQuery may changed during async work) + if(searchQuery != this.searchQuery) { + // If the search input was updated during network activity, discard the results + return } + this.searchResults = [...searchResults]; + this.searchLastSearchFailed = searchLastSearchFailed; for (const result of this.searchResults) { const marker = new MapMarkers.MapMarkerSearchResult(this.map, result); this.searchResultMarkers.push(marker);