JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head> 
  <script>
window.raptor||(window.raptor={q:[{event:"trackevent",params:{p1:"pageview"}}],push:function(event,params,options){this.q.push({event:event,params:params,options:options})},customerId:"test"});


</script>
  </head>
  <body>
    <input type="text" id="txtInput" />
  </body>
</html>

JavaScript

setupSearchTracking("#txtInput", 500)

function setupSearchTracking(searchFieldSelector, delayInMs) {
  if (!searchFieldSelector) {
    console.error("No css selector")
    return
  }

  const defaultDelay = 500
  delayInMs = isNaN(Number(delayInMs)) ? defaultDelay : delayInMs

  var element = document.querySelector(searchFieldSelector)
  if (!element) {
    console.error("Could not find element: " + searchFieldSelector)
    return
  }
  
  element.addEventListener(
    "keyup",
    delay((event) => {
      var searchQuery = event.target.value
      if (!searchQuery) return

      raptor.push("trackevent", { p1: "search", p17: searchQuery })
      console.log("search phrase", searchQuery);
    }, delayInMs),
  )
}

function delay(callback, ms) {
  var timer = 0
  return function () {
    var context = this,
      args = arguments
    clearTimeout(timer)
    timer = window.setTimeout(function () {
      callback.apply(context, args)
    }, ms || 0)
  }
}