미디어위키 검색창 기능 구현 + 디바운스

1 개요

<input id="searchterm" type="text" />
<button id="search">search</button>
<ul id="results"></ul>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js'></script>
<script>
$("#searchterm").keyup( $.debounce( 500, function(e) {
    var q = $("#searchterm").val();
    $.getJSON("//ko.wikipedia.org/w/api.php?callback=?", {
        srsearch: q,
        action: "query",
        list: "search",
        format: "json"
    },
    function (data) {
        $("#results").empty();
        $("#results").append("Results for: " + q + "");
        $.each(data.query.search, function (i, item) {
            $("#results").append("<li><a href='https://ko.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a><br>" + item.snippet + "</li>");
        });
    });
}));
</script>

2 같이 보기

• 디바운스
• 미디어위키 검색창 기능 구현