Клик за циљање дугмета „Цлеар“ (Кс) у пољу за унос

јКуери олакшава покретање вашег пројекта. Иако је последњих година пао у немилост, ипак вреди научити основе, нарочито ако желите брз приступ његовим моћним методама.

Али иако је јКуери моћна библиотека, он не може све. Ту нам добро дође чврсто разумевање ЈаваСцрипт-а ваниле.

Рецимо да имате пројекат Википедиа Виевер попут овог:

Search on Wikipedia

Search Random Article
$("#searchbox").keyup(function(event) { if(event.keyCode === 13) { $("#searchbutton").click(); }; }); $("#searchbutton").click(function() { var searchInput = document.getElementById("searchbox").value; searchInput = searchInput.toLowerCase(); if(searchInput !== "") { var myRequest = new XMLHttpRequest(); myRequest.open('GET','//en.wikipedia.org/w/api.php?action=query&list=search&srsearch='+ searchInput + '&utf8=&format=json&origin=*'); myRequest.onload = function() { var searchResults = JSON.parse(myRequest.responseText); $(".resultingarticles").empty(); for(i=0; i<10; i++) { var articleTitle = searchResults.query.search[i].title; var articleSnippet = searchResults.query.search[i].snippet; var articleId = searchResults.query.search[i].pageid; var articleLink = "//en.wikipedia.org/?curid=" + articleId; $(".resultingarticles").append("" + " " + "

"+articleTitle+"

" + "

" + articleSnippet + "

" + " " + ""); }; }; myRequest.send(); }; });

Све функционише онако како очекујете - можете да унесете текст у оквир за претрагу, притиснете ентер или дугме „Претражи“ и видећете листу чланака на Википедији.

Будући да користите type="search"свој inputелемент, прегледач Цхроме ће аутоматски додати „Кс“ на крај уноса ако постоји текст и ако задржите показивач изнад уноса. Имајте на уму да се други прегледачи могу понашати type="search"другачије.

Када кликнете на „Кс“, текст нестаје.

Али рецимо да већ имате листу чланака, а када обришете текст, желите да обришете и насељене чланке:

Испоставља се да се кликом на „Кс“ у пољу за претрагу активира „сеарцх“ догађај. јКуери не подржава догађај „претрага“, тако да ћете морати да напишете слушалац догађаја на ванилин ЈаваСцрипт-у:

document.getElementById("searchbox").addEventListener("search", function(event) { $(".resultingarticles").empty(); });

Сада када се покрене догађај претраживања, можете да користите јКуери да обришете divелемент са чланцима: