Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Form Example 1</title>
​
<style>
* {
  margin:0;
  padding:0;
}
body {
  background-color:white;
  font:normal normal 16px Times,Serif;
  color:black;
  padding:50px 50px;
}
#ajax-search-form {
  position:relative;
}
#search-result {
  border:1px solid;
  background-color:white;
  padding:15px 20px;
  width:auto;
  height:auto;
  position:absolute;
  top:100%;
  left:0;
  z-index:99;
  display:none;
}
#search-result * {
  margin:0 0 0 0;
  padding:0 0 0 0;
}
#search-result h4 {margin:0 30px 10px 0}
#search-result ol {margin:0 0 10px 28px}
#search-result .close {
  display:block;
  position:absolute;
  top:5px;
  right:10px;
  line-height:normal;
}
</style>
​
</head>
<body>
​
<form action="/search" id="ajax-search-form">
    <input type="text" name="q"> <input type="submit" value="Search">
</form>
​
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
(function($) {
    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    var chunk = 10, // search result per page
        startIndex = 1; // cache the `start-index` value
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    $form.on("submit", function() {
        var keyword = $input.val();
        $result_container.show().html('Loading...');
        $.ajax({
            url: 'http://dte-feed.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&start-index=' + (startIndex === 1 ? startIndex : ((startIndex - 1) * chunk) + 1) + '&max-results=' + chunk,
            type: 'get',
            dataType: 'jsonp',
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (typeof 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><p>' + (startIndex > 1 ? '<a class="prev" href="#prev">Prev</a> ' : "") + '<a class="next" href="#next">Next</a></p>';
                    $result_container.html(skeleton);
                } else {
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                    startIndex = 1; // reset `start-index` value
                }
            },
            error: function() {
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
                startIndex = 1; // reset `start-index` value
            }
        });
        return false;
    });
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });
    $form.on("click", ".next", function() {
        startIndex++;
        $form.trigger("submit");
        return false;
    });
    $form.on("click", ".prev", function() {
        startIndex--;
        $form.trigger("submit");
        return false;
    });
})(jQuery);
</script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
tovicpro
0viewers