Hộp tìm kiếm thông minh hiệu ứng đẹp với JQuery Ajax

Ở bài viết này, mình sẽ hướng dẫn cách thêm tiện ích tìm kiếm bài viết trên blog với JQuery Ajax. Xem hình ảnh và demo bên dưới để hiểu rõ hơn về tiện ích thú vị này

Live Demo

Thực hiện

Tạo tiện ích HTML/Javascript mới tại vị trí bạn muốn xuất hiện hộp tìm kiếm sau đó dán code sau vào

<style type="text/css" scoped="scoped">
#ajax-search-form {
  position:relative;
  font:normal normal 13px/normal Arial,Sans-Serif;
}
#ajax-search-form a {
  color:#741F27;
  text-decoration:none;
}
#ajax-search-form input {
  border:1px solid #ccc;
  border-top-color:#999;
  background-color:white;
  font:inherit;
  color:black;
  margin:0 0;
  padding:5px 5px;
  width:180px;
}
#ajax-search-form input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
#ajax-search-form input[type="submit"] {
  width:auto;
  background-color:#084670;
  border-color:transparent;
  color:#B4D8F0;
  font-weight:bold;
  cursor:pointer;
  padding-left:7px;
  padding-right:7px;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {background-color:#083E5F}
#search-result {
  border:1px solid #bbb;
  background-color:white;
  padding:10px 15px;
  margin:2px 0;
  width:auto;
  height:auto;
  position:absolute;
  top:100%;
  left:0;
  z-index:99;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:none;
}
#search-result ol,
#search-result li,
#search-result h4 {
  margin:0;
  padding:0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result ol a:hover {text-decoration:underline}
#search-result .close {
  display:block;
  position:absolute;
  top:6px;
  right:10px;
  line-height:normal;
  color:#17950F;
}
#search-result strong {color:#B75252}
</style>
<form action="/search" id="ajax-search-form">
    <input type="text" name="q" />
    <input type="submit" value="Search" />
</form>
<script type="text/javascript">
(function($) {
    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
 
    // Append a search result container to the search form
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
 
    // When the keyword is submitted...
    $form.on("submit", function() {
        // Get the input value
        var keyword = $input.val();
        // Show the search result container and insert a `Loading...` text
        $result_container.show().html('Loading...');
        // Get the blog JSON via $.ajax() to show the search result
        // The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'http://www.trollvl.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',
            // If success, grab the search result list...
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4>Search results for keyword &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    // If the JSON is empty ... (entry === undefined)
                    // Show the `not found` or `no result` message
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {
                // If error, show an error message
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });
    // Fade out the search result container if the close button is clicked
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });
})(jQuery);
</script>

• Thay đổi www.trollvl.com  thành link blog của bạn sau đó lưu lại và xem kết quả. Nếu muốn bạn có thể tìm hiểu sâu hơn về cách thức hoạt động chi tiết của thủ thuật này tại đây. Chúc bạn thành công và đừng quên ủng hộ Troll VL nha!

Tham khảo từ DTE