Adds a list of words to skip Autocomplete trigger and abort old reque…

…sts (#4751)

The list of words can grow later, for now we're just taking the keywords
from the queries in the homepage.
Skipping the old requests became a requirement because requests for TELL
would return faster than the previous one for TEL, so we still saw
results from "TEL".

This PR fixes both of these things.

server/routes/shared_api/autocomplete/helpers.py

@@ -56,6 +56,9 @@
     'description': 'Asia',
     'place_dcid': 'asia'
 }] + TWO_WORD_CUSTOM_PLACES
+SKIP_AUTOCOMPLETE_TRIGGER = [
+    "tell", "me", "show", "about", "which", "what", "when", "how"
+]
 
 # Exceptions for the 3 letter trigger rule. These queries can trigger on only two letters.
 TWO_LETTER_TRIGGERS = {"us"}
@@ -70,6 +73,12 @@ def find_queries(user_query: str) -> List[str]:
   words_in_query = re.split(rgx, user_query)
   queries = []
   cumulative = ""
+
+  last_word = words_in_query[-1].lower().strip()
+  if last_word in SKIP_AUTOCOMPLETE_TRIGGER:
+    # don't return any queries.
+    return []
+
   for word in reversed(words_in_query):
     # Extract at most 3 subqueries.
     if len(queries) >= MAX_NUM_OF_QUERIES:

static/js/components/nl_search_bar/auto_complete_input.tsx

@@ -72,6 +72,7 @@ export function AutoCompleteInput(
   props: AutoCompleteInputPropType
 ): ReactElement {
   const wrapperRef = useRef(null);
+  const controller = useRef(new AbortController());
   const [baseInput, setBaseInput] = useState("");
   const [inputText, setInputText] = useState("");
   // TODO(gmechali): Implement stat var search.
@@ -190,16 +191,30 @@ export function AutoCompleteInput(
 
   const triggerAutoCompleteRequest = useCallback(async (query: string) => {
     setLastScrollYOnTrigger(window.scrollY);
+    // Abort the previous request
+    if (controller.current) {
+      controller.current.abort();
+    }
+
+    // Create a new AbortController for the current request
+    controller.current = new AbortController();
+
     await axios
-      .get(`/api/autocomplete?query=${query}&hl=${lang}`, {})
+      .get(`/api/autocomplete?query=${query}&hl=${lang}`, {
+        signal: controller.current.signal,
+      })
       .then((response) => {
-        setResults({
-          placeResults: response["data"]["predictions"],
-          svResults: [],
-        });
+        if (!controller.current.signal.aborted) {
+          setResults({
+            placeResults: response["data"]["predictions"],
+            svResults: [],
+          });
+        }
       })
       .catch((err) => {
-        console.log("Error fetching autocomplete suggestions: " + err);
+        if (!axios.isCancel(err)) {
+          console.log("Error fetching autocomplete suggestions: " + err);
+        }
       });
   }, []);