How to autocomplete websites with domain and logo by using clearbit API in PHP?

autocomplete websites with domain and logo by using clearbit API in PHP

Today now in this post i will show you How to autocomplete websites with domain and logo by using clearbit API in PHP? Here i am going to give you a pretty and interesting example of autocomplete websites lists also with name, logo and domain by using clearbit API. So we can simply use the free clearbit API and also get lists of websites. Now you can see the simply use it in your PHP application and also any framework(Laravel, codeigniter, zend etc).

We know clearbit website is provide us the several other API too like Reveal, Discovery, Website Logo and etc.

Now in this example i will use the following library as like as bellow listed:

  1. clearbit
  2. bootstrap
  3. typeahead

So above the library through we can make the autocomplete of current the websites in our PHP application.

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Jquery setinterval stop after sometime</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/0.11.1/typeahead.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/0.11.1/typeahead.jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
	<style type="text/css">
		.typeahead {
		  background-color: #fff;
		}
		.typeahead:focus {
		  border: 2px solid #0097cf;
		}
		.tt-query {
		  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		}
		.tt-hint {
		  color: #999
		}
		.tt-menu {
		  width: 550px;
		  margin: 12px 0;
		  padding: 8px 0;
		  background-color: #fff;
		  border: 1px solid #ccc;
		  border: 1px solid rgba(0, 0, 0, 0.2);
		  -webkit-border-radius: 8px;
		     -moz-border-radius: 8px;
		          border-radius: 8px;
		  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
		     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
		          box-shadow: 0 5px 10px rgba(0,0,0,.2);
		    left: 17px !important;
		    top: 75% !important;
		}
		.tt-suggestion {
		  padding: 3px 20px;
		  font-size: 18px;
		  line-height: 24px;
		}
		.tt-suggestion:hover {
		  cursor: pointer;
		  color: #fff;
		  background-color: #0097cf;
		}
		.tt-suggestion.tt-cursor {
		  color: #fff;
		  background-color: #0097cf;
		}
		.image-ajax .image {
		  width: 50px;
		  float: left;
		}
		.image-ajax .menu-text{
		    padding-bottom: 0px;
		    margin: 0px;
		}
		.image-ajax .price{
		    font-size: 12px;
		    margin: 0px;
		}
		.image-ajax .ajax-text{
		    padding-left: 60px;
		}
		.tt-suggestion.tt-cursor {
		  color: #fff;
		  background-color: #0097cf;
		}
		.tt-suggestion p {
		  margin: 5px;
		}
	</style>
</head>
<body>


	<input type="text" name="search" class="typeahead form-control">


	<div class="selected-dom" style="display:none">
		<strong>Name : </strong><p class="name"></p>
		<strong>Domain : </strong><p class="domain"></p>
		<strong>Logo : </strong><img class="logo" src="">
	</div>


	<script type="text/javascript">
		var suggestionEngine = new Bloodhound({
	      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
	      queryTokenizer: Bloodhound.tokenizers.whitespace,
	      remote: {
	        url: '/ajax.php?q=',
	        replace: function(url, query) {
	          return url + query;
	        },
	        transform: function(response) {
	          return response;
	        },
	        ajax: {
	          type: "POST",
	          data: {
	            q: function() {
	              return $('.typeahead').val()
	            }
	          }
	        }
	      }
	    });
	    var suggestionTemplate = function (data) {
	        return '<div class="image-ajax"><img class="image" src="' + data.logo + '"/> <div class="ajax-text"><p class="menu-text">' + data.name + '</p>' + '<p class="price menu-text"> ' + data.domain + '</p></div></div>';
	    }
	    $('.typeahead').typeahead(
	      {
	        highlight: true,
	        minLength:3
	      },
	      {
	        name: 'page',
	        display: 'title',
	        source: suggestionEngine,
	        templates: {
	          notFound: '<p align="center"> not found </p>',
	          suggestion: suggestionTemplate,
	          pending: '<p align="center">Loading</p>'
	        },
	      }).bind('typeahead:select', function(ev, suggestion) {
	      		$(".selected-dom").css("display","block");
	      		$(".name").text(suggestion.name);
	      		$(".domain").text(suggestion.domain);
	      		$(".logo").attr("src",suggestion.logo);
	      		$(".typeahead").typeahead('val',suggestion.name);
	    });
	</script>


</body>
</html>
ajax.php
<?php


$ch = curl_init("https://autocomplete.clearbit.com/v1/companies/suggest?query=".$_GET['q']."");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, 0);
$data = curl_exec($ch);
curl_close($ch);

$result = json_decode($data);
$result2 = [];

if(!empty($result)){
    foreach ($result as $key => $value) {
        $result2[$key]['name'] = $value->name;
        $result2[$key]['domain'] = $value->domain;
        $result2[$key]['logo'] = $value->logo;
        $result2[$key]['id'] = ++$key;
    }
}
echo json_encode($result2);
?>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →