SOURCE

let index = 0;

$("#search-box").on("keyup", (e) => {
  const defer = (3 - index++) * 1000
  const currentData = $("#search-box").val();
  $.get('http://api.thisjs.cn/search/' + currentData + '?defer=' + defer)
    .then(res => {
        const response = res["infoData"];
        if(response) {
           renderUser(
              response.login,
              response.html_url,
              response.avatar_url
          ); 
        }
    })
})

function renderUser(login, href, imgSrc) {
    let searchResult = $("#search-result");
    searchResult.show();
    searchResult.attr("href", href);
    $("#search-result__avatar").attr('src', imgSrc);
    $('#search-result__login').text(login);
}

<div class="container">

    <!-- Search controls -->
    <h1>Search Github Users</h1>
    <div class="form-group">
        <label for="search-box">
          Username:
        </label>
        <input
            id="search-box"
            type="text"
            class="form-control"
        />
    </div>
    <hr />
  
    <!-- Search result -->
    <a
        href=""
        target="_blank"
        id="search-result"
        style="display:none;"
    >
        <h2 id="search-result__login"></h2>
        <img
            src=""
            alt="avatar"
            width="150px"
            height="150px"
            id="search-result__avatar"
        />
    </a>
</div>