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>

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

☷✎

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

Comments

Post a Comment

Meta keywords generator tool for Blogger

Custom permalink creator for blogger

Create direct download link for google drive file online

blogger meta description generator

How to keep input value if user change current page in blogger

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

Related

Comments

Post a Comment