Awesomplete Remote API Example

by addressable

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.7/awesomplete.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.7/awesomplete.min.css">
<h1>
  <a href="https://projects.verou.me/awesomplete/" target="_blank">Awesomplete</a>
  Example
</h1>

<input class="awesomplete" id="query" placeholder="Type to search..."/>

<p>
Searching live against the free API "Get Vehicle Types for Make by Name"
<a href="https://vpic.nhtsa.dot.gov/api/">https://vpic.nhtsa.dot.gov/api/</a>
</p>
e.g. try Merc, BMW, Nissan

JavaScript

const queryInput = document.querySelector("#query")

const awesomplete = new Awesomplete(queryInput, {
  filter: () => {
    // We will provide a list that is already filtered ...
    return true
  },
  sort: false, // ... and sorted.
  list: [],
})

function selectAutocomplete(event) {
  console.log("selected: " + event.text.value)
}
Awesomplete.$.bind(queryInput, {
  "awesomplete-selectcomplete": selectAutocomplete,
})

queryInput.addEventListener("input", (event) => {
  const inputText = event.target.value

  if (inputText.length < 2 || inputText.length > 10) return // Avoid making API calls for very short or long inputs

	console.log("query: " + inputText)

  fetch(
    `https://vpic.nhtsa.dot.gov/api/vehicles/GetVehicleTypesForMake/${encodeURIComponent(inputText)}?format=json`,
  )
    .then((response) => {
      if (!response.ok) throw new Error("Network response was not ok")
      return response.json()
    })
    .then((suggestions) => {
      console.log("API response:", suggestions)
      awesomplete.list = (suggestions.Results || []).map((item) => item.MakeName)
      awesomplete.evaluate()
    })
    .catch((error) => {
      console.error("Error fetching autocomplete suggestions:", error.message || error)
    })
})