Suggest with autoComplete

by Mapycz

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.02.min.css">
</head>

<body>
    <div class="autoComplete_wrapper">
        <input id="autoComplete" type="search" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/autoComplete.min.js"></script>
</body>

</html>

JavaScript

const API_KEY = 'eyJpIjoyNTcsImMiOjE2Njc0ODU2MjN9.c_UlvdpHGTI_Jb-TNMYlDYuIkCLJaUpi911RdlwPsAY';
const inputElem = document.querySelector("#autoComplete");
// cache - [key: query] = suggest items
const queryCache = {};
// get items by query
const getItems = async(query) => {
	if (queryCache[query]) {
  	return queryCache[query];
  }
  
	try {
    // you need to use your own api key!
  	const fetchData = await fetch(`https://api.mapy.cz/v1/suggest?lang=cs&limit=5&type=regional.address&apikey=${API_KEY}&query=${query}`);
    const jsonData = await fetchData.json();
    // map values to { value, data }
    const items = jsonData.items.map(item => ({
      value: item.name,
      data: item,
    }));
    
    // save to cache
    queryCache[query] = items;
    
    return items;
  } catch (exc) {
  	return [];
  }
};

const autoCompleteJS = new autoComplete({
	selector: () => inputElem,
	placeHolder: "Enter your address...",
  searchEngine: (query, record) => `<mark>${record}</mark>`,
	data: {
    keys: ["value"],
		src: async(query) => {
    	// get items for current query
      const items = await getItems(query);
      
      // cache hit? - there is a problem, because this provider needs to get items
      // for each query and cannot handle different timeouts for different query.
      // if previous query was completed - it's already in the cache, and some
      // old query is completed, we test it againts current query and returns correct items.
      if (queryCache[inputElem.value]) {
      	return queryCache[inputElem.value];
      }
      
      return items;
		},
		cache: false,
	},
	resultItem: {
  	element: (item, data) => {
    	const itemData = data.value.data;
    	const desc = document.createElement("div");
      
      desc.style = "overflow: hidden; white-space: nowrap; text-overflow: ellipsis;";
      desc.innerHTML = `${itemData.label}, ${itemData.location}`;
      item.append(
      	desc,
      );
    },
		highlight: true
	},
	resultsList: {
...