JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<form action="/search" id="ajax-search-form">
    <input type="text" name="q" />
    <input type="submit" value="Search" />
</form>

<div id="db-search-container"></div>

CSS

#ajax-search-form {
  position:relative;
  font:normal normal 13px/normal Arial,Sans-Serif;color:#999;
}
#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}

#db-search-result {border:1px solid #bbb;background-color:#333;padding:10px 15px;margin:2px 0;width:auto;height:auto;max-width:400px;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;}
#db-search-container ul,#db-search-container li,#db-search-container h4 {margin:0;padding:0;}
#db-search-container h4,#db-search-container strong {display:block;margin:0 30px 10px 0;}
#db-search-container ul a {font-size:13px;color:#369;font-weight:bold;}
#db-search-container ul a:hover {color:#fff;}
#db-search-container li {overflow:hidden;list-style:none;margin-top:2px;    background-color: #444;border-bottom: 1px solid #555;padding:5px;font-size:10px;}
#db-search-container .close {display:block;position:absolute;top:6px;right:10px;line-height:normal;color:#369;}
#db-search-container strong {color:#B75252}
#db-search-container img {float:left;margin:2px 10px 0px 0;padding:2px;border:1px solid #ccc;}
#db-search-container {width:100%;padding:10px;margin:0 auto;background-color: #222;display:none;position:absolute;overflow:auto;}

JavaScript

(function($) {
    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    $form.append('<div id="db-search-result"></div>');
    var $result_container = $('#db-search-container');
    $form.on("submit", function() {
        var keyword = $input.val();
        $result_container.show().html('Loading...');
        $.ajax({
            url: 'http://defandaky.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=999',
            type: 'get',
            dataType: 'jsonp',
            success: function(json) {
                var entry = json.feed.entry,
                    link, summary, thumbnail, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4>Hasil penelusuran untuk kata kunci &#8220;<mark>' + keyword + '</mark>&#8221;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ul>';
                    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;
                            }
                        }var mark = new RegExp(keyword, "ig");
                        thumbnail = ("media$thumbnail" in entry[i]) ? '<img alt="" src="' + entry[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s200-c") + '" width="60" height="60">' : "";
                        summary = ("summary" in entry[i]) ? entry[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
                        summary = summary.length > 250 ? summary.substring(0, 250) + '&hellip;' : summary;
                        skeleton += '<li>' + thumbnail + '<a href="' + link + '">' + entry[i].title.$t.replace(mark, "<span style=\'background-color:orange;text-decoration:underline;\'>" + keyword + "</span>") + '</a><br>' + summary + '</li>';
                    }
      ...