Målretning Klik på “Ryd” -knappen (X) i indtastningsfeltet

jQuery gør det let at få dit projekt i gang. Selvom det er faldet ud af favør de seneste år, er det stadig værd at lære det grundlæggende, især hvis du vil have hurtig adgang til dets kraftfulde metoder.

Men mens jQuery er et kraftfuldt bibliotek, kan det ikke gøre alt. Det er her, at have solid forståelse af vanille JavaScript kommer til nytte.

Sig, at du har et Wikipedia Viewer-projekt som dette:

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(); }; });

Alt fungerer som du forventer - du kan indtaste tekst i søgefeltet, trykke på enter eller "Søg" -knappen og se en liste over Wikipedia-artikler.

Fordi du bruger type="search"på dit inputelement, tilføjer Chrome-browseren automatisk et "X" i slutningen af ​​input, hvis der er tekst, og du holder markøren over input. Bemærk, at andre browsere muligvis håndterer type="search"forskelligt.

Når du klikker på "X", forsvinder teksten.

Men sig, at du allerede har en liste over artikler, og når du rydder teksten, vil du også rydde de befolkede artikler:

Det viser sig, at klik på "X" i søgefeltet affyrer en "søg" -begivenhed. jQuery understøtter ikke "søg" -begivenheden, så du bliver nødt til at skrive en begivenhedslytter i vanilje JavaScript:

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

Nu når en søgehændelse er affyret, kan du bruge jQuery til at rydde divelementet med artiklerne: