Sử dụng Google AJAX Search API

Thảo luận trong 'Lập trình web với PHP' bắt đầu bởi babyinternet, 15/11/10.

  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,654
    Đã được thích:
    1,574
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    Lượt dịch từ nguồn về để tham khảo và chia sẻ với anh em có nhu cầu sử dụng :yes: .

    Demo:: Live demo

    [​IMG]

    Đăng ký sử dụng Google API

    Để sử dụng Google API, bạn cần đăng ký một API key. Những bước đăng ký khá đơn giản.

    [​IMG]

    Code HTML:

    Mã:
    <form action="http://www.google.com/search" method="get">
    	
    	<input type="search" id="search-box" name="q" results="5" placeholder="Search..." autocomplete="on" />
    	
    	<input type="hidden" name="sitesearch" value="davidwalsh.name" />
    	
    	<input id="search-submit" type="submit" value="Search" />
    </form>
    
    
    <script type="text/javascript" src="http://www.google.com/jsapi?key=MY_REALLY_REALLY_REALLY_REALLY_REALLY_REALLY_LONG_KEY"></script>
    <script type="text/javascript">
    	google.load('mootools','1.2.4');
    	google.load('search','1');
    </script>
    CSS để định dạng:
    Mã:
    /* results positioning */
    #search-results		{ position:absolute; z-index:90; top:40px; right:10px; visibility:hidden; }
    /* triangle! */
    #search-results-pointer { width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #eee; margin-left:80%; }
    /* content DIV which holds search results! */
    #search-results-content { position:relative; padding:20px; background:#fff; border:3px solid #eee; width:380px; min-height:200px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) }
    Javascript

    Mã:
    window.addEvent('domready',function(){
    
    	/* search */
    	var searchBox = $('search-box'), searchLoaded=false, searchFn = function() {
    
    		/*
    			We're lazyloading all of the search stuff.
    			After all, why create elements, add listeners, etc. if the user never gets there?
    		*/
    		if(!searchLoaded) {
    			searchLoaded = true; //set searchLoaded to "true"; no more loading!
    
    			//build elements!
    			var container = new Element('div',{ id: 'search-results' }).inject($('search-area'),'after');
    			var wrapper = new Element('div',{
    				styles: {
    					position: 'relative'
    				}
    			}).inject(container);
    			new Element('div',{ id: 'search-results-pointer' }).inject(wrapper);
    			var contentContainer = new Element('div',{ id: 'search-results-content' }).inject(wrapper);
    			var closer = new Element('a', {
    				href: 'javascript:;',
    				text: 'Close',
    				styles: {
    					position: 'absolute', //position the "Close" link
    					bottom: 35,
    					right: 20
    				},
    				events: {
    					click: function() {
    						container.fade(0);
    					}
    				}
    			}).inject(wrapper);
    
    			//google interaction
    			var search = new google.search.WebSearch(),
    				control = new google.search.SearchControl(),
    				options = new google.search.DrawOptions();
    
    			//set google options
    			options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
    			options.setInput(searchBox);
    
    			//set search options
    			search.setUserDefinedClassSuffix('siteSearch');
    			search.setSiteRestriction('davidwalsh.name');
    			search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
    
    			//set search controls
    			control.addSearcher(search);
    			control.draw(contentContainer,options);
    			control.setNoResultsString('No results were found.');
    
    			//add listeners to search box
    			searchBox.addEvents({
    				keyup: function(e) {
    					if(searchBox.value && searchBox.value != searchBox.get('placeholder')) {
    						container.fade(0.9);
    						control.execute(searchBox.value);
    					}
    					else {
    						container.fade(0);
    					}
    				}
    			});
    			searchBox.removeEvent('focus',searchFn);
    		}
    	};
    	searchBox.addEvent('focus',searchFn);
    });
    Đoạn Javascript có nhiệm vụ :

    • Tạo một bảng để hiển thị kết quả tìm kiếm.[/*:m:khpqkf1u]
    • Tạo một nút close để đóng bảng kết quả tìm kiếm.[/*:m:khpqkf1u]
    • Tạo một class Google có các thuộc tính:
      [list:khpqkf1u]
    • Một class cho phép tìm kiếm (bạn có thể tùy chỉnh phạm vi tìm kiếm nếu muốn...). Tham khảo thêm tại: google.search.WebSearch options[/*:m:khpqkf1u]
    • Một SearchControl instance.[/*:m:khpqkf1u]
    • Một DrawOptions instance. Với class này, chúng ta có thể set nơi hiện các kết quả và message trả về nếu không kết quả nào được tìm thấy[/*:m:khpqkf1u]
    [/*:m:khpqkf1u][/list:u:khpqkf1u]
     
  2. itnuamua

    itnuamua Đang làm quen

    Tham gia ngày:
    5/4/10
    Bài viết:
    88
    Đã được thích:
    0
    Điểm thành tích:
    6
    bài này hay quá, xin phép babyinternet cho mình leech về site mình :D
    Hiện tại mình cũng đang dùng search của google thay cho search mặc định nhưng thôi để giảm tải cho trang chủ, để cái ajax search này sang trang khác
    Cảm ơn nhiều nha!
    http://www.48tin.com/search.php
     
Đang tải...

Chia sẻ trang này