how to add search in select option when data fetching from ajax call

Question

enter image description here

enter image description here

enter image description here

enter image description here

search bar is added but data not fetching in selectize jquery and at the normal side are working fetch data option tag but after adding search bar in drop down it can not working so please help

Answer 1

This is the simple version of your task. So may be it will helpful for you:

let url = 'https://rickandmortyapi.com/api/character/?page=1';
let isOpen = false;
const select = document.querySelector('#characters');

const getCharacters = (isFirstRun) => {
  if (!isFirstRun) {
    isOpen = !isOpen;

    if (isOpen) return;
  }


  fetch(url)
    .then(response => response.json())
    .then(charactersData => {
      url = charactersData.info.next;
      select.innerHTML = '';
      return charactersData.results.map(charactersData => charactersData.name);
    })
    .then(charactersNames => charactersNames.forEach(characterName => {
      const option = document.createElement('option');
      option.innerText = characterName;
      select.appendChild(option);
    }))
    .catch(e => console.log(e.message));
}

getCharacters(true);

<select id="characters" onclick='getCharacters()'></select>

Answer 2

You can use an input with datalist.

https://developer.mozilla.org/de/docs/Web/HTML/Element/datalist