<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 = ''
}
})
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.