Page Comparison

Warning

title	Engine Compatibility

annotate is not supported by the Node engine.

annotate_search_results(<selector_func>)

...

These methods take the name of a javascript method that inspects each search result and returns the html for annotation. If no annotation is desired, return false and no annotation will be performed. The annotation method is called once for each search result, and is provided as an argument the DOM element of the search result for your evaluation. You can inspect the DOM element to evaluate the search result, and we also provide common data in a universal way. We recommend using these methods (shown in the example below) instead of extracting the same data yourself.

Code Block

language	javascript
theme	Confluence
language	javascript
title	Selector Example

emit <<
function my_select(obj) {
  var domain = $K(obj).data("domain");
  var url = $K(obj).data("url");
  if(domain === "www.baconsalt.com") {
     return "<span>Good Food!</span>";
  } else {
    false;
  }
}
>>;
annotate_search_results(my_select);

The extracted data includes domain and url, and for local search results, includes a phone number and height of the element as well. The following example is a basic use of local search annotation.

Code Block

language	javascript
theme	Confluence
language	javascript
title	Local Search Annotation:

emit <<
function my_select(obj) {
  var domain = $K(obj).data("domain");
  var url = $K(obj).data("url");
  var height = $K(obj).data("height");
  var phone = $K(obj).data("phone");
  if(phone === "8015551212") {
     return "<span>Call for Information!</span>";
  } else {
    false;
  }
}
>>;
annotate_local_search_results(my_select);

It is common to use a dataset in search annotation, which allows lookup of information without embedding it all within your code. The following example shows lookup by domain within a dataset. In the following example, the dataset mydataset will need to be declared in the global block of the application.

Code Block

language

language	javascript
theme	Confluence
javascript	title	Dataset Example

emit <<
function my_select(obj) {
  var domain = $K(obj).data("domain");
  var url = $K(obj).data("url");
  var o = mydataset[domain];
  if(o) {
     return "<span>Found in Dataset!</span>";
  } else {
    false;
  }
}
>>;
annotate_search_results(my_select);

...

To use a remote dataset, do not provide a select function and use the remote option providing the URL of the remote data service.

Code Block

language	javascript
theme	Confluence
language	javascript
title	Remote Data

annotate_search_results() with remote = "http://example.com/myservice?jsoncallback=?";

...

The annotatedata argument is a URL encoded JSON struct with the available extracted data. The unencoded version of the data in the above URL is below.

Code Block

language	javascript
theme	Confluence	language	javascript

{
  "KOBJ1":{"url":"http://www.cheese.com/", "domain":"www.cheese.com"},
  "KOBJ2":{"url":"http://en.wikipedia.org/wiki/Cheese", "domain":"en.wikipedia.org"},
  "KOBJ3":{"url":"http://live.gnome.org/Cheese", "domain":"live.gnome.org"}
}

...

You can also annotate search results with a remote datasource and a Javascript decorator function, the following is an example.

Code Block

language	javascript
theme	Confluence
language	javascript
title	Annotate Remote Decorator

rule annotate_remote_decorator is active {
 
       emit <<
 
      function selector(data) { // data is the data returned by your remote data/script
               return data + "Extra annotation stuff"; 
     }
 
       >>
       annotate_search_results(selector) with remote = "http://www.example.com/path/to/script";
}

...

You may wish to use Search annotation on sites that are not natively supported by the annotation actions. You can extend this functionality onto other websites or customize existing sites by use of the domains option.

Code Block

language

language	javascript
theme	Confluence		javascript

annotate_search_results(my_selector)
  with domains = {"www.ebay.com": { "selector": ".lview.nol",
                                    "modify": "#anchors",
                                    "watcher": "",
                                    "urlSel": ".v4lnk" } };

...

The structure of an annotation consists of list elements inside an unordered list inside an inner div which is inside an outer div. This structure allows for multiple annotations to exist without interfering with each other and allows the head and tail image treatment described above. For example:

Code Block

language	javascript
theme	Confluence	language	javascript

annotate_search_results(my_selector)
  with inner_div_css = {"height" : "25px"} and
       placement = "after";

The following options use literal hashes to specify CSS properties that will be attached to each of the elements that make up an annotation (values in angle brackets represent variables set from the option values given above):

Code Block

language	css
theme	Confluence	language	css
title	outer_div_css defaults to the following:

 {
 "float": "right",
 "width": "auto",
 "height": <height>,
 "font-size": <font_size>,
 "line-height": "normal",
 "font-family": <font_family>
}

...

Versions Compared

Old Version 6

New Version Current

Key