Chủ nhật, ngày 4 tháng 12 năm 2016

ASP.NET Google Custom Search - Sử dụng Công cụ Tìm kiếm Tuỳ chỉnh

Ngày đăng: 2/10/2011, 11:18:39PM | Lượt xem: 5,028
Hot!

Google cung cấp công cụ giúp chúng ta tạo và nhúng kết quả tìm kiếm vào website một cách dễ dàng đó là  Google Custom Search Engine (CSE). Sử dụng công cụ này bạn sẽ không phải viết Form tìm kiếm trên trang web của bạn và cũng sẽ nhận được nhiều lợi ích từ google search

Có một điều khi bạn sử dụng Google Custom Search Engine là bạn không chạy thử được khi bạn đang xây dựng website vì dữ liệu trả về phải có trong cơ sở dữ liệu của google tức là web của bạn đã search được trên google và những bài mới cập nhật chưa được google cập nhật cũng sẽ không xuất hiện trong kết quả tìm kiếm.

Bài viết này tôi sẽ hướng dẫn bạn các bước để thực hiện sử dụng CSE của google để tạo chức năng tìm kiếm trên website của bạn.

Bạn cần đảm bảo là đã có một tài khoản gmail vì chúng ta sẽ sử dụng tài khoản gmail để đăng ký. Nếu chưa có bạn cần tạo cho mình 1 tài khoản gmail. Bạn truy cập http://www.google.com/cse/ Hoặc nếu thích dùng tiếng việt bạn truy cập http://www.google.com.vn/cse/ ở đât tôi sẽ dùng tiếng việt mô tả cho dễ. Tiếp theo chọn Tạo Công cụ Tìm kiếm Tuỳ chỉnh (Create a Custom Search Engine). Bạn được chuyển đến trang tiếp theo bạn đăng nhập với tài khoản gmail của bạn.

Bước tiếp theo bạn nhập các thông tin trong phần mô tả công cụ tìm kiếm của bạn. Ví dụ
- Tên (Tên công cụ tìm kiếm:): hmweb.com.vn Chia sẻ là niềm vui
- Mô tả: OTDH, Lập trình web với asp.net, C#, SQL server, jquery
- Ngôn ngữ: Tiếng Việt
- Trang web tìm kiếm: bạn có thể cấu hình để CSE tìm kiếm cụ thể ví dụ nếu bạn muốn chỉ tìm các trang aspx thì bạn điền nội dung: http://tenweb.com/*.aspx.  Nhưng tốt nhât ta nên chọn tìm kiếm tất cả các trang ta sẽ dùng: http://tenweb.com/*
- Phiên bạn: Bạn chọn phiên bản miễn phí

Nhấn Next. Tại đây bạn có thể chọn các tùy chọn cho kết quả tìm kiếm. Ta cứ chọn mặc định vì sau đó ta có thể thay đổi được. Google sẽ cung cấp cho bạn một id chính là id cse của bạn

Nhấn Next đến bước này bạn đã hoàn thành đăng ký. Google sẽ gửi mail cho bạn và cung cấp cho bạn đoạn mã html để nhúng vào trang web của bạn.

Giờ bạn chọn liên kết Giao diện để tiếp tục các thay đổi của bạn. Bạn thay đổi các thiết lập nếu bạn muốn. Ở hmweb tôi chọn tùy chọn lưu trữ là iframe: Cung cấp tuỳ chỉnh giới hạn và yêu cầu trang riêng biệt về các kết quả trên trang web của bạn.

Các tùy chọn khác bạn có thể tìm hiểu thêm. Bạn nhấn vào liên kết nhận mã để lấy code html đặt vào trang nơi muốn hiển thị form tìm kiếm. Chúng ta sẽ nhận được 2 đoạn code html. một dùng là Form tìm kiếm cái còn lại là code để hiển thị kết quả tìm kiếm. Copy code html form tìm kiếm vào nơi bạn muốn hiển thị

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('search', '1');
  google.setOnLoadCallback(function() {
    google.search.CustomSearchControl.attachAutoCompletion(
      '006309227296184785814:f9bcc86z5hm',
      document.getElementById('q'),
      'cse-search-box');
  });
</script>
<form action="" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="006309227296184785814:f9bcc86z5hm" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" id="q" autocomplete="off" size="31" />
    <input type="submit" name="sa" value="Tìm kiếm" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=vi"></script>

Bạn chú ý id của bạn sẽ khác. Bạn tạo trang hiển thị kết quả search_result.aspx. Và copy đoạn code hiển thị kết quả tìm kiếm

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

Trong Form trên bạn chú ý đến thuộc tính action="" của thẻ form chỉ định đến trang kết quả search_result.aspx.  Khi ta nhập từ khóa tại ô tìm kiếm thì sẽ postback đến trang search_result.aspx với url là:

search_result.aspx?cx=006309227296184785814:f9bcc86z5hm&cof=FORID%3A11&ie=UTF-8&q=Từ Khóa&sa=Search

Như vậy nếu bạn truy cập trực tiếp trang search_result với url với Từ Khóa cần tìm. Vậy ta sẽ tìm cách cải tiến form search.

Ta sẽ sửa lại để form tìm kiếm không còn phụ thuộc vào thuộc tính action nữa và code tại nơi muốn hiển thị textbox tìm kiếm sẽ như sau:

 <input type="hidden" name="cx" value="006309227296184785814:f9bcc86z5hm" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" id="q" autocomplete="off" size="30" onKeyPress="return SubmitOnEnter(this,event)" /> 
    <input type="submit" class="tim" name="sa" value="Tìm kiếm"  onclick="SearchSite();"  />
  </div>

Giờ ta sẽ viết các hàm cho sự kiện onKeyPress và onclick như sau:

function URLEncode (clearString) {
  var output = '';
  var x = 0;
  clearString = clearString.toString();
  var regex = /(^[a-zA-Z0-9_.]*)/;
  while (x < clearString.length) {
    var match = regex.exec(clearString.substr(x));
    if (match != null && match.length > 1 && match[1] != '') {
    	output += match[1];
      x += match[1].length;
    } else {
      if (clearString[x] == ' ')
        output += '+';
      else {
        var charCode = clearString.charCodeAt(x);
        var hexVal = charCode.toString(16);
        output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
      }
      x++;
    }
  }
  return output;
}

function SubmitOnEnter(myfield, e)
{
	var keycode;
	if (window.event)
		keycode = window.event.keyCode;
	else if (e)
		keycode = e.which;
	else
		return true;
	if (keycode == 13)
	{
		SearchSite();
		return false;
	}
	else
		return true;
}
function SearchSite()
{
    document.location.href='search_result.aspx?cx=006309227296184785814:f9bcc86z5hm&cof=FORID%3A11&ie=UTF-8&q=' + URLEncode(document.getElementById('q').value) + '&sa=Search';
}

 Chúc bạn thành công

hmweb
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.