Thêm khung tìm kiếm Wikipedia vào Website

0

Wikipedia là một từ điển bách khoa toàn thư lớn nhất thế giới. Tại website Wikipedia, mọi người có thể tự do đăng ký thành viên và thêm những thông tin bổ ích từ địa danh, con người, kiến thức … Hiện tại Wikipedia đã có cho tất cả các ngôn ngữ. Trong đó, tính tới thời điểm hiện tại đã có hơn 1 triệu thông tin tiếng Việt.

Thêm khung tìm kiếm Wikipedia vào Website

Đây là nội dung chính của chúng ta. Hôm nay chúng ta sẽ thực hiện thêm một khung tìm kiếm thông tin từ Wikipedia vào website của bạn. Bằng cách khi người dùng thực hiện tìm kiếm, các kết quả sẽ hiển thị và link tới trực tiếp tới website Wikipedia.

Thêm khung tìm kiếm Wikipedia vào Website khung tìm kiếm Wikipedia - Thêm khung tìm kiếm Wikipedia vào Website
Thêm khung tìm kiếm Wikipedia vào Website

Đầu tiên chúng ta cần gọi hai thư viện JS này về:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>

Tiếp đến là phần tạo khung chuẩn bằng HTML như sau:

<h1>Bạn muốn tìm cái gì ?</h1>
<div class="wrapper1">
  <div class="content-wrapper1">
    <div class="search-button1">
      <span><img src="http://www.laivanduc.com/wp-content/uploads/2015/08/search-icon_laivanduc.png" /></span>
    </div>
    <div class="search-box1">
      <input id="searchBox" type="text" placeholder="Tìm kiếm trên Wikipedia ..." />
      <img src="http://www.laivanduc.com/wp-content/uploads/2015/08/close_laivanduc.png" />
    </div>
  </div>
</div>
<div id="contentBox">
</div>

Sau đó là định dạng đoạn code bên trên bằng CSS:

@import url(http://fonts.googleapis.com/css?family=arial);
body {
  margin-top: 2em;
  background: #E9E9E9;
  text-align: center;
}

h1 {
  font-family: "Arial", cursive;
  margin-bottom: 1em;
  font-size: 20px;
  
}

.wrapper1,
.wrapper2 {
  display: inline-block;
  width: 60vw;
  min-width: 288px;
  margin: 0 auto;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  perspective: 1200px;
}

.search-button1,
.search-button2,
.newSearch-button {
  display: block;
  position: absolute;
  width: 50px;
  height: 30px;
  border: 1px solid #aa7818;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb700), to(#ff8c00));
  background-image: -webkit-linear-gradient(top, #ffb700, #ff8c00);
  background-image: -moz-linear-gradient(top, #ffb700, #ff8c00);
  background-image: -ms-linear-gradient(top, #ffb700, #ff8c00);
  background-image: -o-linear-gradient(top, #ffb700, #ff8c00);
  background-image: linear-gradient(to bottom, #ffb700, #ff8c00);
  box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em, #8e620e 0 0.5em 0, rgba(0, 0, 0, 0.2) 0 0.9em 3px;
  padding: 10px 6px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1;
  -webkit-transform: translateZ(45px);
  -moz-transform: translateZ(45px);
  -ms-transform: translateZ(45px);
  transform: translateZ(45px);
}

.search-button1 {
  width: 60vw;
  min-width: 288px;
}

.search-button1 span,
.search-button2 span,
.newSearch-button span {
  display: block;
  margin: 0 auto;
  background: #643904;
  border-radius: 30px;
  width: 30px;
  height: 30px;
  box-shadow: rgba(255, 255, 255, .3) 0 1px 0px;
}

.search-button1 span img,
.search-button2 span img {
  vertical-align: middle;
  padding-top: 7px;
}

.search-button1:hover,
.search-button2:hover,
.wrapper-simple input[type=submit]:hover,
.newSearch-button:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
  background-image: -webkit-linear-gradient(top, #ffcb48, #ff9c23);
  background-image: -moz-linear-gradient(top, #ffcb48, #ff9c23);
  background-image: -ms-linear-gradient(top, #ffcb48, #ff9c23);
  background-image: -o-linear-gradient(top, #ffcb48, #ff9c23);
  background-image: linear-gradient(to bottom, #ffcb48, #ff9c23);
}

.search-button1:active,
.search-button2:active,
.newSearch-button:active {
  margin-top: 0.2em;
  box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em, #8e620e 0 0.3em 0, rgba(0, 0, 0, 0.2) 0 0.5em 3px;
}

.search-box1,
.search-box2 {
  margin-top: -.6em;
  display: none;
  position: absolute;
  width: 60vw;
  min-width: 288px;
  height: 50px;
  padding: 10px 6px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
  background-image: -webkit-linear-gradient(top, #f5fafe, #e2edf4);
  background-image: -moz-linear-gradient(top, #f5fafe, #e2edf4);
  background-image: -ms-linear-gradient(top, #f5fafe, #e2edf4);
  background-image: -o-linear-gradient(top, #f5fafe, #e2edf4);
  background-image: linear-gradient(to bottom, #f5fafe, #e2edf4);
  border: 1px solid #9bb6c9;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em, #899faf 0 .5em 0px, rgba(0, 0, 0, 0.2) 0 .9em 3px;
  -webkit-transform: rotate3d(1, 0, 0, 90deg) translateZ(20px);
  -moz-transform: rotate3d(1, 0, 0, 90deg) translateZ(20px);
  -ms-transform: rotate3d(1, 0, 0, 90deg) translateZ(20px);
  transform: rotate3d(1, 0, 0, 90deg) translateZ(20px);
}

.search-box1 input,
.search-box2 input,
.wrapper-simple input[type=text] {
  font-family: Arial;
  font-weight: bold;
  color: #1a3d51;
  background: #d8e6ef;
  border-radius: 2px;
  padding: 10px 10px 15px 10px;
  width: 55vw;
  min-width: 260px;
  border: 0;
  font-size: 16px;
  text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
  box-shadow: inset rgba(0, 0, 0, .4) 0 1px 1px;
}

.search-box1 input:focus,
.search-box2 input:focus,
.wrapper-simple input[type=text]:focus {
  outline: none;
}

input::-webkit-input-placeholder {
  font-family: Arial;
  font-weight: bold;
  color: #1a3d51;
  text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
}

input:-moz-placeholder {
  font-family: Arial;
  font-weight: bold;
  color: #1a3d51;
  text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
}

.search-box1 img,
.search-box2 img {
  opacity: .5;
  position: absolute;
  margin: .6em 0 0 -2em;
  cursor: pointer;
  -webkit-transition: 0.5s linear;
  -moz-transition: 0.5s linear;
  -ms-transition: 0.5s linear;
  -o-transition: 0.5s linear;
  transition: 0.5s linear;
}

.search-box1 img:hover,
.search-box2 img:hover {
  opacity: 1;
}

.hide-search-button {
  display: none;
}

.show-search-button {
  display: block;
}

.show-search-box {
  display: block;
}

.showed-search-box {
  display: block;
  -webkit-transform: rotate3d(1, 0, 0, 0deg);
  -moz-transform: rotate3d(1, 0, 0, 0deg);
  -ms-transform: rotate3d(1, 0, 0, 0deg);
  transform: rotate3d(1, 0, 0, 0deg);
}

.hidden-search-box {
  -webkit-transform: rotate3d(1, 0, 0, 90deg) translateZ(25px);
  -moz-transform: rotate3d(1, 0, 0, 90deg) translateZ(25px);
  -ms-transform: rotate3d(1, 0, 0, 90deg) translateZ(25px);
  transform: rotate3d(1, 0, 0, 90deg) translateZ(25px);
}

.switch-show {
  height: 50px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: showBox 0.5s ease-in-out;
  -moz-animation: showBox 0.5s ease-in-out;
  -ms-animation: showBox 0.5s ease-in-out;
}

.switch-hide {
  height: 50px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: hideBox 0.5s ease-in-out;
  -moz-animation: hideBox 0.5s ease-in-out;
  -ms-animation: hideBox 0.5s ease-in-out;
}

.switch-show {
  height: 50px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: showBox 0.5s ease-in-out;
  -moz-animation: showBox 0.5s ease-in-out;
  -ms-animation: showBox 0.5s ease-in-out;
}

.switch-hide {
  height: 50px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: hideBox 0.5s ease-in-out;
  -moz-animation: hideBox 0.5s ease-in-out;
  -ms-animation: hideBox 0.5s ease-in-out;
}

@-webkit-keyframes showBox {
  0% {
    -webkit-transform: rotate3d(1, 0, 0, 0);
  }
  100% {
    -webkit-transform: rotate3d(1, 0, 0, -90deg);
  }
}

@-moz-keyframes showBox {
  0% {
    -moz-transform: rotate3d(1, 0, 0, 0);
  }
  100% {
    -moz-transform: rotate3d(1, 0, 0, -90deg);
  }
}

@-ms-keyframes showBox {
  0% {
    -ms-transform: rotate3d(1, 0, 0, 0);
  }
  100% {
    -ms-transform: rotate3d(1, 0, 0, -90deg);
  }
}

@-webkit-keyframes hideBox {
  0% {
    -webkit-transform: rotate3d(1, 0, 0, -90deg);
  }
  100% {
    -webkit-transform: rotate3d(1, 0, 0, 0);
  }
}

@-moz-keyframes hideBox {
  0% {
    -moz-transform: rotate3d(1, 0, 0, -90deg);
  }
  100% {
    -moz-transform: rotate3d(1, 0, 0, 0);
  }
}

@-ms-keyframes hideBox {
  0% {
    -ms-transform: rotate3d(1, 0, 0, -90deg);
  }
  100% {
    -ms-transform: rotate3d(1, 0, 0, 0);
  }
}
.resultLink:link, .resultLink:visited{
  text-decoration:none;
  color:black;
}

h3{
  font-family: "Arial", cursive;
  border-bottom: 1px solid orange;
}
#contentBox{
  width:70vw;
  margin: 0 auto;
  margin-top: 100px;
  padding: 0;
}
.resultBox, .badResultBox{
  background-color:white;
  padding: 0px 10px 2px 10px;
  margin:0px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
p{
  padding: 0px 5px 0px 5px;
}
.resultBox:hover, .badResultBox:hover{
  border-left: 5px solid orange;
  padding-left:5px;
}

Cuối cùng nhưng quan rất quan trọng. Ứng dụng này có hoạt động tốt hay không là do đoạn Code JavaScript dưới đây:

$(document).ready(function() {

  $('.search-button1').click(function() {

    $('.content-wrapper1').addClass('switch-show');
    $('.search-box1').addClass('show-search-box');
  
    $("#searchBox").focus();

    setTimeout(function() {

      $('.content-wrapper1').removeClass('switch-show');
      $('.search-button1').removeClass('show-search-button').addClass('hide-search-button');
      $('.search-box1').addClass('showed-search-box');

    }, 480);
  });

  $('.search-box1 img').click(function() {

    $('.search-button1').removeClass('hide-search-button');
    $('.search-box1').addClass('hidden-search-box');
    $('.content-wrapper1').addClass('switch-hide');
    document.getElementById("searchBox").value = "";
    $("#contentBox").empty();

    setTimeout(function() {

      $('.content-wrapper1').removeClass('switch-hide');
      $('.search-button1').removeClass('show-search-button');
      $('.search-box1').removeClass('show-search-box showed-search-box hidden-search-box');

    }, 480);

  });

  if (!Modernizr.input.placeholder) {
    $("input").each(function() {

      thisPlaceholder = $(this).attr("placeholder");

      if (thisPlaceholder != "") {

        $(this).val(thisPlaceholder);

        $(this).focus(function() {
          if ($(this).val() == thisPlaceholder) $(this).val("");
        });
        $(this).blur(function() {
          if ($(this).val() == "") $(this).val(thisPlaceholder);
        });
      }
    });
  }

  $("#searchBox").keyup(function() {
    
    if ($("#searchBox").val() === "") {
      $("#contentBox").empty();
    } else {
      
      var url = "http://en.wikipedia.org/w/api.php?action=opensearch&redirects=resolve&search=" + $(this).val() + "&callback=?";
      
      $.ajax({
        dataType: 'jsonp',
        headers: {
          'Api-User-Agent': 'CodepenWikipediaSearch/0.1'
        },
        url: url,
        success: function(res) {
          
          $("#contentBox").empty();

          
          var name = 1;
          var desc = 2;
          var link = 3;

          
          if (res[name].length === 0) {
            $("#contentBox").append("<div class='badResultBox'> <h3>Không có kết quả từ wikipedia.</h3> <p>Bạn có chắc là đang nhập đúng những gì muốn tìm về từ khóa <strong>\"" + $("#searchBox").val() + "\" </strong>. Vui lòng nhấp vào đây để thực hiện lại</p></div>");
          } else {
           
           
            for (var i = 0; i < res[name].length; i++) {
              
              var description;
              
            
              if (res[desc][i].slice(-13) === "may refer to:") {
                description = "Click to be taken to the disambiguation page on Wikipedia.";
              } else {
                description = res[desc][i];
              }

              $("#contentBox").append("<div class='resultBox'> <a href='" + res[link][i] + "' target='_blank' id='res" + i + "' class='resultLink'><h3>" + res[name][i] + "</h3></a> <p>" + description + "</p></div>");
            }
          }
          
         
          $(".resultBox").click(function() {
            var link = $(this).find("a").attr("id");
            document.getElementById(link).click();
          });
          
         
          $(".badResultBox").click(function() {
            document.getElementById("searchBox").value = "";
            $("#contentBox").empty();
            $("#searchBox").focus();
          });

        }
      });
    }
  });
});

Xong rồi đấy. Ngay bây giờ mời các bạn cùng Demo và hãy cho tôi biết bạn tìm kiếm cái gì trên Wikipedia nhé.

See the Pen Add search box on the website Wikipedia by Lại Văn Đức (@laivanduc) on CodePen.16775

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.