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
Design html elements like below
1. input text field is to get search keyword
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
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>
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); }
The edge of these books is looking so minor and people get a kick out of the opportunity to welcome these books. The reason is that people need to get information with 7dollaressay.com about the legislative issues and diversion. It is to a great degree helpful for me and I like it.
ReplyDeleteشركة مكافحة الحشرات بالدمام
ReplyDeleteشركة لمكافحة الحشرات بالدمام واجهت كل واحدة منا بالفعل مشكلة الحشرات في منزله أو مكتبه أو حديقته ، خاصة في فصل الصيف ومع ارتفاع درجات الحرارة.
شركة مكافحة النمل الابيض بحائل
شركة مكافحة حشرات بحائل
شركة رش مبيدات بحائل
افضل شركة رش مبيدات