SOURCE

var isSearch = false;
$(document).ready(function() {
  //鼠标经过显示星星
  // $("body").jstars({
  //   image_path: "imgs",
  //   style: 'rand',
  //   frequency: 15
  // });
  //当点击搜索图标时，变成搜索框
  $(".search-img-a").on("click", function() {
    $(".search-img-a").css("display", "none");
    $(".search-text").fadeIn(400);
    $(".search-title").focus();
    $(".clear-ico").fadeIn(150);
  });

  //点击关闭按钮就恢复到原来的样子
  $(".clear-ico").on("click", function() {
    if (!isSearch) {
      //如果不是搜索状态
      $(".search-title").val("");
      $(".search-text").fadeOut(200, function() {
        $(".search-img-a").fadeIn(400);
      });
    } else if (isSearch) {
      isSearch = false;
      //先恢复原状
      $(".search-ul").html("");
      $(".title").css("position", "relative");
      $(".title").animate({
        left: '0'
      },
      500);
      $(".search-before").animate({
        top: "35%"
      },
      500, function() {
        $(".itro").fadeIn(300);
        $(".search-title").val("");
        $(".search-text").fadeOut(200, function() {
          $(".search-img-a").fadeIn(400);
        });
      });
    }
  });

  //监听输入框回车事件
  $(".search-title").keydown(function(event) {
    if (event.keyCode == 13) {
      var keyword = $(".search-title").val();

      if (keyword == "") {
        //如果没有输入
        $(".title").css("position", "relative");
        $(".title").animate({
          left: '-40%'
        },
        500);

        $(".search-before").animate({
          top: "-40px"
        },
        500, function() {
          $(".searching").fadeIn(200);
        });
        $(".itro").css("display", "none");
        isSearch = true;
        $(".search-ul").html("");
        return;
      }

      //alert("got it");
      if (!isSearch) {
        $(".title").css("position", "relative");
        $(".title").animate({
          left: '-40%'
        },
        500);

        $(".search-before").animate({
          top: "-40px"
        },
        500, function() {
          $(".searching").fadeIn(200);
        });
        $(".itro").css("display", "none");
        isSearch = true;

        //开始从wiki获取搜索到的东西了
        getFromWiki(keyword);
      } else if (isSearch) {
        getFromWiki(keyword);
      }
    }
  });

  var getFromWiki = function(keyword) {
    $.ajax({
      url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + keyword + "&prop=info&inprop=url&utf8=&format=json",
      dataType: "jsonp",
      success: function(response) {
        //console.log(response);
        showResults(response, keyword);
      },
      error: function() {
        alert("Sorry,there's something wrong within the search,please refresh this page and try again!");
      }
    });
  }

  var showResults = function(response, keyword) {
    console.log(response);
    //console.log(response.query.search.length);
    $(".search-ul").html("");

    if (response.query.search.length == 0) {
      //没搜到
      var str = '<a class="search-link" href="#">';
      str += '<li class="search-li"><h3 class="search-h3">^_^</h3>';
      str += '<p class="search-abs">Sorry,the word "' + keyword + '" is not existed in wiki\'s database</p>';
      //str+='<p class="search-time">'+response.query.search[i].timestamp+'</p></li></a>';
      var dot = $(str);
      $(".search-ul").append(dot);
      return;
    }

    for (var i = 0; i < response.query.search.length; i++) {
      var str = '<a class="search-link" href="https://en.wikipedia.org/wiki/' + response.query.search[i].title + '" target="_blank">';
      str += '<li class="search-li"><h3 class="search-h3">' + response.query.search[i].title + '</h3>';
      str += '<p class="search-abs">' + response.query.search[i].snippet + '</p>';
      str += '<p class="search-time">' + response.query.search[i].timestamp + '</p></li></a>';
      var dot = $(str);
      $(".search-ul").append(dot);
    }
  }

  var showError = function(keyword) {

}

});

<div class="content">
  <div class="mainDiv container-fluid">
    <div class="search-before">
      <center>
        <a href="http://en.wikipedia.org/wiki/Special:Random" class="getRandom">
          Lucky wiki!
        </a>
        <br />
        <a href="#" class="search-img-a">
          <img src="https://s1.ax1x.com/2018/05/12/CBDnkn.png" class="search-ico"
          />
        </a>
        <div class="search-text">
          <input type="text" class="search-title" name="search-title" />
          <a href="#" class="serach-clear">
            <img src="https://s1.ax1x.com/2018/05/12/CBDQpV.png" class="clear-ico"
            />
          </a>
        </div>
        <p class="intro">
          CLick the icon to search
        </p>
      </center>
    </div>
    <div class="seraching">
      <ul class="search-ul">
      </ul>
    </div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #434343;
  height: 80%;
  width: 100%;
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
}

.title {
  margin: 0 auto;
  margin-top: 40px;
  text-align: center;
  font-family: 'Rochester', cursive;
  font-size: 3em;
  color: #808f7c;
}

.content {
  height: 100%;
  width: 100%;
}

.mainDiv {
  height: 100%;
  width: 100%;
}

.search-before {
  position: relative;
  top: 35%;
  transform: translateY(-50%);
}

.getRandom {
  font-size: 1.5em;
  color: #fff;
  display: inline;
}

.getRandom:link {
  color: #fff;
  text-decoration: none;
}

.getRandom:visited {
  color: #fff;
  text-decoration: none;
}

.getRandom:hover {
  color: #f0a986;
  text-decoration: none;
}

.getRandom:active {
  color: #fff;
  text-decoration: none;
}

.search-ico {
  margin-top: 0.8em;
  width: 1.8em;
}
.search-title {
  width: 16em;
  outline: none;
  padding: 10px 20px;
  padding-right: 3em;
  border-radius: 30px;
  border-color: #f0a986;
  font-size: 1.2em;
  border-style: solid;
  display: inline;
}
.search-clear {
  position: relative;
  margin-left: -3em;
  bottom: 2px;
}
.clear-ico {
  display: none;
  width: 1.5em;
}
.search-text {
  margin-top: 1.2em;
  display: inline;
  display: none;
}

.itro {
  margin-top: 0.8em;
  color: #fff;
  font-size: 1.2em;
}

.searching {
  position: relative;
  display: none;
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
}

.search-li {
  list-style: none;
  background-color: #6699a1;
  padding: 10px 20px;
  margin-bottom: 20px;
  border-left: solid 5px #fff;
}

.search-h3 {
  color: #fff;
}

.search-abs {
  color: #a5dee4;
  font-size: 1.2em;
}

.search-time {
  color: #fbe251;
}

.search-link:link {
  text-decoration: none;
}

.search-link:visited {
  text-decoration: none;
}

.search-link:hover {
  text-decoration: none;
}

.search-link:active {
  text-decoration: none;
}

.search-li:hover {
  border-left: solid 5px #f0a986;
}