Menu
GIỚI THIỆU
  • Xây dựng thanh tìm kiếm wikipedia tại trang cá nhân đơn giản với HTML, CSS, JavaScript cơ bản. Đưa thanh tìm kiếm Wikipedia lên website cá nhân mang lại nhiều lợi ích

Đưa thanh tìm kiếm Wikipedia lên website cá nhân

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.

 

Xây dựng thanh tìm kiếm Wikipedia trong website cá nhân

Đâ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 thanh tìm kiếm Wikipedia vào website cá nhân đơn giản
Thêm thanh tìm kiếm Wikipedia vào website cá nhân đơn giản

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

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

#Bước 2: Tạo khung chuẩn bằng HTML

<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="//yourdomain/wp-content/uploads/2015/08/search-image.png" /></span>
     </div>
     <div class="search-box1">
       <input id="searchBox" type="text" placeholder="Tìm kiếm trên Wikipedia ..." />
       <img src="//yourdomain/wp-content/uploads/2015/08/image.png" />
     </div>
   </div>
 </div>
 <div id="contentBox">
 </div>

#Bước 3: Định dạng thẩm mỹ bằng CSS

@import url(//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;
}

#Bước 4: Thêm một đoạn JavaScript giúp hoạt động tính năng tìm kiếm

$(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 = "//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();
           });
 
         }
       });
     }
   });
 });

#Kết quả

Thêm thanh tìm kiếm wikipedia vào website cá nhân
Thêm thanh tìm kiếm wikipedia vào website cá nhân

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é.

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Đưa thanh tìm kiếm Wikipedia lên website cá nhân
Tags: HTML CSS JavaScript Wikipedia
Category: Chia sẻ
Mạnh xã hội: Follow fanpage của team https://www.facebook.com/hoicode/ để tiếp tục theo dõi các loạt bài mới nhất về Chia sẻ,Java,C,C++,Javascript,HTML,PHP,Python,Database,Mobile.... mới nhất của chúng tôi.

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.
  1. avatar-logo-hoicode

    admin

    Bài viết hay http://hoicode.com/

  2. Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha