Popup search sử dụng Jquery

Posted by on
Hầu hết các ô search hiện nay đều hiện thị kết quả tìm kiếm ở một trang khác, điều này khiến người đọc phải rời khỏi trang mà họ đang đọc. Hôm nay, mình sẽ giới thiệu với các bạn một ô search khác, ưu điểm của nó là hiện thị kết quả tìm kiếm ở một cửa sổ pop up, điều này giúp cho người đọc không phải rời khỏi trang mà họ đang đọc.

#DEMO


Loading...

#Thêm Jquery

1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ </head>
4. Dán code dưới vào trên thẻ mà bạn vừa tìm.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Nếu trong blog của bạn đã có đoạn Jquery trên rồi thì không cần thêm nữa.

#Thêm CSS

1. Tìm thẻ ]]></b:skin>
2. Bạn hãy chọn 1 trong 2 code dưới rồi dán code dưới vào dưới thẻ mà bạn vừa tìm
#search-form-feed {
  width:200px; /* lebar kotak penelusuran */
  position:relative;
  margin:0 0 10px;
  padding:0 0;
  font:normal normal 11px Arial,Sans-Serif;
  color:#333;
}

#feed-q-input {
  display:block;
  width:100%;
  border:2px solid #bbb;
  background-color:white;
  padding:5px 5px;
  font:normal bold 13px Tahoma,Arial,Sans-Serif;
  color:#ccc;
  margin:0 0;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#feed-q-input:focus {
  border-color:#0D6786;
  color:#333;
  outline:none;
  -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  box-shadow:0 0 5px #153E95,0 0 7px #153E95;
}

#search-result-container {
  width:400px;
  height:300px;
  overflow:auto;
  position:absolute;
  top:100%;
  right:0;
  z-index:999;
  background-color:#E5EDF7;
  border:2px solid white;
  padding:10px 10px 0;
  margin:10px 0 0;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

#search-result-container mark {
  background-color:yellow;
  color:black;
}

#search-result-container a {
  text-decoration:none;
  color:#0D3E71;
  font-weight:bold;
  font-size:12px;
  display:block;
}

#search-result-container a:hover {
  color:#052748;
}

#search-result-container h4 {
  margin:0 0 10px;
  font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:#B50001;
}

#search-result-container ol {
  background:transparent;
  border:none;
  margin:0 0 10px;
  padding:0 0;
}

#search-result-container li {
  margin:0 0 1px;
  padding:7px 8px;
  list-style:none;
  border:1px solid #B7C1CE;
  background-color:white;
  overflow:hidden;
  word-wrap:break-word;
}

#search-result-container li img {
  display:block;
  float:left;
  margin:0 10px 4px 0;
  border:1px solid #B7C1CE;
  background-color:#F5F5F5;
  padding:2px 2px;
}

#search-result-loader {
  position:absolute;
  top:100%;
  left:5px;
  z-index:999;
  background-color:#0D6786;
  color:white;
  padding:3px 5px;
  margin:-2px 0 0;
  font:normal bold 10px Arial,Sans-Serif;
  -webkit-border-radius:0 0 3px 3px;
  -moz-border-radius:0 0 3px 3px;
  border-radius:0 0 3px 3px;
  display:none;
}
#search-form-feed {
  width:200px; /* lebar kotak penelusuran */
  position:relative;
  margin:0 0 10px;
  padding:0;
  font:normal normal 11px/normal Arial,Sans-Serif;
  color:#333;
}

#feed-q-input {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  display:block;
  width:100%;
  border:1px solid #bbb;
  background-color:white;
  padding:5px 5px;
  font:inherit;
  font-size:13px;
  margin:0;
}

#search-result-container {
  width:400px;
  height:300px;
  overflow:auto;
  position:absolute;
  top:100%;
  left:0; /* ganti menjadi `right:0` untuk mendorong kontainer ke kanan */
  z-index:9999;
  border:1px solid #ccc;
  padding:10px 10px 0;
  margin:10px 0 0;
  -webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow:0 3px 5px rgba(0,0,0,.2);
  box-shadow:0 3px 5px rgba(0,0,0,.2);
  display:none;
}

#search-result-container mark {
  font:inherit;
  display:inline;
  background-color:#ff0;
  color:black;
}

#search-result-container a {
  text-decoration:none;
  font-weight:bold;
  font-size:110%;
  display:block;
}

#search-result-container h4 {
  margin:0 0 10px;
  font:inherit;
  font-weight:bold;
  color:#B50001;
}

#search-result-container ol {
  background:none;
  border:none;
  margin:0 0 10px;
  padding:0;
}

#search-result-container li {
  margin:0 0 15px;
  list-style:none;
  overflow:hidden;
  word-wrap:break-word;
  padding-left:65px;
}

#search-result-container li img {
  display:block;
  float:left;
  margin:0 0 2px -55px;
  border:1px solid #ccc;
  padding:2px;
}

#search-result-loader {
  position:absolute;
  top:100%;
  left:5px;
  z-index:9999;
  margin-top:4px;
  font-size:10px;
  display:none;
}
3. Bạn hãy lưu mẫu lại.

#Thêm HTML/Javascript

1. Bố cục > Thêm tiện ích > HTML/Javascript
2. Dán code dưới vào
<div id="search-form-feed">
    <form action="/search" onsubmit="return updateScript();">
        <input name="q" type="text" value="Telusuri..." id="feed-q-input" onkeyup="resetField();" onfocus="this.value='';"/>
    </form>
    <div id="search-result-container"></div>
    <div id="search-result-loader">Loading...</div>
</div>
<script type="text/javascript">
//<![CDATA[
var searchFormConfig = {
    url: "http://khanh98.blogspot.com", //địa chỉ blog của bạn
    numPost: 9999, 
    summaryPost: true,
    summaryLength: 400,
    resultTitle: "Kết quả tìm kiếm của từ khóa",
    noResult: "Không tìm thấy", 
    resultThumbnail: true,
    thumbSize: 40, 
    fallbackThumb: "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png" 
//]]>
</script>
<script>
    //<![CDATA[
/**
 * File js nay: http://reader-download.googlecode.com/svn/trunk/blogger-quick-search.js
 * Blogger Quick Search Result JSON
 * Author: Taufik Nurrohman
 * URL: https://plus.google.com/108949996304093815163/about
 * See: http://hompimpaalaihumgambreng.blogspot.com/2012/09/membangun-aplikasi-quick-search-dengan.html
 */

// Just a shortcut for document.getElementById();
function getId(id) {
 return document.getElementById(id);
}

var config = searchFormConfig,
 input = getId('feed-q-input'),
 resultContainer = getId('search-result-container'),
 resultLoader = getId('search-result-loader'),
 skeleton = '';

// The Most Basic :: JSON caller function to display the list of posts in the container
function showResult(json) {
 var entry = json.feed.entry ? json.feed.entry : "", url, summary, img;
 skeleton  = '<h4>' + config.resultTitle + ' &quot;' + input.value + '&quot;</h4>';
 skeleton += '<a title="Close" style="display:block;position:absolute;top:10px;right:12px;line-height:normal;text-decoration:none;color:inherit;font-size:150%;" href="#close" onclick="resultContainer.style.display=\'none\';return false;">&times;</a><ol>';
 if (entry === "") {
  skeleton += '<li>' + config.noResult + '</li>';
 }
 for (var i = 0; i < config.numPost; i++) {
  if (i == entry.length) break;
  var mark = new RegExp(input.value, "ig"), entries = entry[i], title = entries.title.$t.replace(mark, "<mark>"+input.value+"</mark>");
  for (var j = 0; j < entries.link.length; j++) {
   if (entries.link[j].rel == 'alternate') {
    url = entries.link[j].href;
    break;
   }
  }
  summary = ("summary" in entries && config.summaryPost === true) ? entries.summary.$t : "";
  if (config.resultThumbnail === true) {
   img = ("media$thumbnail" in entries) ? entries.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s"+config.thumbSize+"-c") : config.fallbackThumb;
  }
  summary = summary.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "");
  if (summary.length > config.summaryLength) {
   summary = summary.substring(0, config.summaryLength) + '...';
  }
  summary = summary.replace(mark, "<mark>"+input.value+"</mark>");
  skeleton += '<li><img style="width:'+config.thumbSize+'px;height:'+config.thumbSize+'px;" src="'+img+'" alt="" /><a href="'+url+'" target="_blank">'+title+'</a>'+summary+'</li>';
 }
 skeleton += '</ol>';
 resultContainer.innerHTML = skeleton;
 resultLoader.style.display = "none";
 resultContainer.style.display = "block";
}

// Insert an empty <script> tag with ID of 'search-feed-script'
(function() {
 var s = document.createElement('script');
  s.type = "text/javascript";
  s.id = "search-feed-script";
 document.getElementsByTagName('head')[0].appendChild(s);
})();

// Used to manipulate the 'q' parameter value in the 'search-feed-script' based on keywords that written in the search input
function updateScript() {
 resultContainer.style.display = "none";
 resultLoader.style.display = "block";
 var script = getId('search-feed-script'),
  newScript = document.createElement('script'),
  val = input.value;
 newScript.id = "search-feed-script";
 newScript.type = "text/javascript";
 newScript.src = config.url+"/feeds/posts/summary?alt=json-in-script&q="+val+"&max-results="+config.numPost+"&callback=showResult";
 // Remove the empty script that we crated before...
 script.parentNode.removeChild(script);
 // Then, insert a new script with the callback of showResult() fuunction based on the 'q' parameter value of input.value
 // So, the result will be like this => http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q=QUERIES&max-results=XXXX&callback=showResult
 document.getElementsByTagName('head')[0].appendChild(newScript);
 return false;
}

// Used to hide the search result container when the search input value is empty
function resetField() {
 if (input.value === "") {
  resultContainer.style.display = "none";
  resultLoader.style.display = "none";
 }
}


    //]]>
</script>
Lưu ý: Hãy chú ý tới những đoạn được đánh dấu trong code
3. Lưu lại
Như vây là bạn đã hoàn thành khung search.
Hi! My name is Quoc Khanh. I am from Vietnam.

Comments

Post a Comment



» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.