knadh / floatype.js Goto Github PK

.kill() // to stop instance and listeners.  
.enable() // to enable listeners. 

function insertSpan(str, position) {
  // Check if the position is within the string length
  if (position > 0 && position <= str.length) {
    // Insert <span> at the specified position
    return (
      str.substring(0, position - 1) +
      '<span class="currentLetter">' +
      str.charAt(position - 1) +
      "</span>" +
      str.substring(position)
    );
  } else {
    // If the position is invalid, return the string as is
    return str;
  }
}

document.querySelector("textarea").value = "";
let matchValue = null; // used to store current value. 

function bind() {
  return floatype(document.querySelector("textarea"), {
    onQuery: async (val) => {
      // This callback returns an array of search results.
      // Typically, this will be a server side fetch() request.
      // Example:
      // 		const resp = await fetch(`/search?q=${query}`);
      // 		const res = await response.json();
      //		return res;
      matchValue = val;
      const q = val.trim().toLowerCase();

      return WORDS.filter((s) => s.startsWith(q)).slice(0, 10);
    },
    onRender: function (item) {
      // Example custom rendering function for autocomplete items
      const div = document.createElement("div");

      div.innerHTML = insertSpan(item, matchValue.length);
      return div;
    }
  });
}