I would like to thank iconfinder.com. Icon finder has given API  to get information about icons. We have to create a key to connect to icon finder API. Read about API here

Concept of search engine:
1. get search keyword from user
2. user can trigger search from "search" button
3. load icons JSON info by ajax call from iconfinder website
4. display icons in the "display" panel

This search engine was implemented in Online tool to convert icons to flat colored icons

with these fallowing parameters we can search information about icons
  • q: Search term
  • p: Specify result page (index). Starts from 0
  • c: Number of icons per page. (Takes values between 1 and 50)
  • l: Filter on license. Takes the following values:
    • 0 - include all icons
    • 1 - includes only icons with commercial licenses
    • 2 - includes only icons with commercial license which does not require a link to designer's website.
  • min: Specify minimum size of icons
  • max: Specify maximum size of icons
  • price: Price filter. Takes the following values:
    • empty or any - include all icons
    • nonpremium - include only non-premium
    • premium - include only icons premium icons
  • api_key: An Iconfinder API key
  • callback: Name of callback function (JSONP)
By using this api we can get information about icons in XML and JSON. Here i am using JSON data to build search engine

https://www.iconfinder.com/json/search/?q=user&api_key=783f611658d
  1. to get JSON data of icons of search keyword 'user'

https://www.iconfinder.com/json/search/?q=user&p=10&c=20&api_key=783f611658d
  1. to get JSON data of icons of search keyword 'user'
  2. get results from 10 to 30 (20 icons total)

https://www.iconfinder.com/json/search/?q=user&p=10&c=20&price=nonpremium&api_key=783f611658d
  1. to get JSON data of icons of search keyword 'user'
  2. get results from 10 to 30 (20 icons total)
  3. get only non-premium icons

https://www.iconfinder.com/json/search/?q=user&p=10&c=20&price=nonpremium&min=20&max=200&api_key=783f611658d
  1. to get JSON data of icons of search keyword 'user'
  2. get results from 10 to 30 (20 icons total)
  3. get only non-premium icons
  4. minimum icon size is 20 and maximum icon size is 200

lets starts search engine construction. Here we are constructing search engine with jquery and html 

Design html elements like below

<div style="width:330px;">
<input style="width:200px" name="iconsearch" id="iconsearch"/>
<button onclick="return loadImages(0,10);">search</button>
<div id="results"></div>
</div>
   1. input text field is to get search keyword
   2. "search" button is to trigger search engine
   3. "results" is to display results

Create style like below

body {
 font-family : wf_SegoeUILight, wf_SegoeUI, Tahoma, Verdana, Arial, sans-serif;
}
input {
 padding:8px;
 border-radius:5px;
 border:1px solid #ccc;
 margin:5px;
}
button {
 padding:8px;
}
.myimage {
 margin:10px;
 padding:10px;
 border : 2px solid #fff;
}

.morebutton {
 width:258px; 
}

.morebutton1 {
 text-align:center; 
}

.myimage:hover {
 cursor :pointer;
 border : 2px solid #00ffff;
}

#results {
   height:300px;
   overflow:scroll;
}

create script like below

function loadMoreImages(from,to) {
  var que = $('#iconsearch').val();
  var urlicon='https://www.iconfinder.com/json/search/';
  var myhtml='';
  if(que.length > 2) {
    
    $(".morebutton").remove();
    myhtml= $('#results').html();
    $('#results').html(myhtml+"<br><div class=morebutton1><img class=morebutton1 src=/loading.gif></div>");
    
    $.ajax({
       url: urlicon,
       dataType: "jsonp",
       data : {
     q : que,
     c : to,
     p : from,
     min : "1",
     max : "200",
     api_key : "783f611658d64"
       },
       success: function( data ) {
          $(".morebutton1").remove();
     var b=false;
     for(var i=0;i<data.searchresults.icons.length;i++) {
        myhtml = myhtml + '<img onclick="return loadMyImage(this);" class=myimage src="'+data.searchresults.icons[i].image+'" width="40px" height="40px"/>';
     b=true;
       }
       if(b) {
     var to1 = to+10;
       myhtml = myhtml + '<button class=morebutton onclick="return loadMoreImages('+to+','+to1+');">more results</button>';   
       } else {
          myhtml = myhtml + '<div>no results found</div>';
       }
    $('#results').html(myhtml);
   } });        
  }
  }
  
  function loadImages(from,to){
   $('#results').html('');
   loadMoreImages(from,to);
  }

0 comments:

Blogroll

Follow this blog by Email

Popular Posts