How to Create smart autocomplete input search from blogger api using jQuery

In this example we will need an autocomplete code from the jquery library, and the blogger api to call article titles automatically.

This code generates suggestions based on the article titles found in a specific blog, let's me show how it's work:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="ui-widget"> <form action="/search"> <label for="tags">Tags: </label> <input id="tags" type="search"> </form> </div> <script id="ss"></script> <br><br> <script type="text/javascript"> function titlePost(json) { var autosugg = ""; var i; for (var i = 0; i < json.feed.entry.length; i++) { var postTitle =json.feed.entry[i].title.$t; autosugg += '"' + postTitle + '", '; } document.getElementById("ss").innerHTML='$( function() {var availableTags = ['+autosugg+'];$( "#tags" ).autocomplete({source: function(request, response) { var results = $.ui.autocomplete.filter(availableTags, request.term); response(results.slice(0, 7)); }});} );'; }; </script> <script src="https://manajmnt-code.blogspot.com/feeds/posts/summary?max-results=999999&alt=json-in-script&callback=titlePost"></script>

© Manajmnt code

Share to :

☷✎