Search with hidden list

Questions
1

I would like to implement a searchbar. The searchable list should never be visible, but only the results when a hit occurs. How does this work?

2

Make list hidden by default. Inside the search method set it to true once results are fetched.

for example in Vue.

<template>
<input type="text" v-model="search">
<button @click="getResults">

<div v-if="showResults">
<ListComponent :data="data" />
</div>
</template>
<script setup>
const showResults = ref(false);
const data = ref([]);
const search = ref("");

const getData = () => {
  try {
    // make fetch call
  } catch ( err ) {
   console.log(err)
  } finally {
    showResults.value = true;
  }
}
</script>
3

Thanks for the quick reply. But I use Core. How would the example look then?

4

Dom7 in core works like jQuery. Set list container style="display: none" and class="data-list". And inside the script, add this method for the button.

$(".btn-search").on("click", function(e) {

  e.preventDefault();

  try {
    // make fetch call
  } catch ( err ) {
   console.log(err)
  } finally {
    $(".data-list").show();
  }
})
5

Can you give me a complete example, including HTML?