<input type="text" id="viewList" style="position: fixed; top: 10px;">
let apiTagsLink = 'https://topceramica.ru/wp-json/wp/v2/posts/?search='
        let inputTags = document.getElementById('viewList')
        let reqList = document.createElement('ul')
        let parentUl = inputTags.parentNode

        inputTags.addEventListener("input", inputTextTags)

        function inputTextTags() {
            let request = inputTags.value
            fetch(apiTagsLink + request)
                .then((response) => {
                    // console.log(response)
                    return response.json()
                })
                .then((data) => {
              reqList.innerHTML = ''
              
              var list
                    
                        data.forEach(element => {
                          list += '<li data-id='+element.id+'>'+element.title.rendered+'</li>'
                        })
reqList.innerHTML += list
parentUl.insertBefore(reqList, inputTags)                        
                    
                    if(inputTags.value == ""){
                reqList.innerHTML = ''
              }
                })
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.