<form id="search" type="get" action="https://en.wikipedia.org/">
  
  <label for="search-input">
    Search Wikipedia:
  </label>
  
  <input
    id="search-input"
    name="search"
    @input="getResults($event.target.value)"
  >
  
  <button>Submit</button>
  
  <ul v-cloak>
    <li v-for="result in results">
      <a :href="result.link">
        {{ result.title }}
      </a>
    </li>
  </ul>
  
</form>

[v-cloak] {
  display: none;
}

import { createApp } from 'https://unpkg.com/petite-vue?module'

const API_URL = 'https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search='

createApp({
  results: [],
  
  async getResults (search) {
    if (!search) {
      this.results = []
      return  
    }
    
    const response = await fetch(API_URL + search)
    const data = await response.json()
    
    const titles = data[1]
    const links = data[3]
    
    this.results = titles.map((title, index) => ({
      title,
      link: links[index]
    }))
  }
}).mount('#search')