FBSearch

FBSearch is a jQuery plugin which allows to have advantages of FB API and Autocomplete in one place.
It sets certain informations in appropriate nodes and stores them also with $.data in the search node.
I started to write this plugin basing on kammerer’s Facebook Search and would like to thank him :)
So far it can search only fanpages. Tested on IE6, IE8, Chrome 9, Firefox 3, Opera 11.

Install

It can be used just like any other jQuery plugin, but also Facebook API (Javascript SDK) and jQuery UI Autocomplete are required.
Kammerer’s jQuery-busy is optional.

I used: [http://connect.facebook.net/en_US/all.js] and [https://github.com/kammerer/jquery-busy]

Usage

So far plugin should be called on a ’’’single element’’’. Why? Because it stores data information in this node.
Maybe in the future it will be changed and extended for usage with many elements.

General scheme of usage
$(“#website_fanpage_url”).fbsearch({
busy : {
BUSY OPTIONS
},
autocomplete : {
JQUERY UI AUTOCOMPLETE OPTIONS
},
FB SEARCH OPTIONS
});

General scheme of usage 2
$(“#website_fanpage_url”).fbsearch(“OPTION”);

Overriding default options for all instances of FBSearch
$(“#website_fanpage_url”).fbsearch(“defaults”, { FB SEARCH OPTIONS }); – default options for FBSearch

$(“#website_fanpage_url”).fbsearch(“autocomplete-defaults”, { JQUERY UI AUTOCOMPLETE OPTIONS }); – default options for jQuery UI Autocomplete used in FBSearch

$(“#website_fanpage_url”).fbsearch(“busy-defaults”, { BUSY OPTIONS }); – default options for jQuery-busy used in FBSearch

Changing default options for external plugins (such as jQuery UI Autocomplete and jQuery-busy) doesn’t affect its settings outside the FBSearch.

Terminating search
$(“#website_fanpage_url”).fbsearch(“cancel”);

Fetching information
You can fetch information about searched fanpage directly from element which was FBSearch called on.

$(“#website_fanpage_url”).fbsearch(“likes”); – it returns information about fanpage’s likes stored with $.data.

Instead of “likes” you can use one of the belowed options as well:
“name”, “url”, “category”, “facebook_id”, “image_url”, “state” (name of autocomplete’s function last called)

Without options
You can also call plugin without options like:

$(“#website_fanpage_url”).fbsearch();

then plugin will use only default settings.

BUSY OPTIONS

Exactly those options which you can use in jQuery-busy plus you can specify which object should be used as busy one (image option)

Default options
position : “center”,
img : “/busy-facebook-search.gif”

On default as busy element is used icon specified in FB SEARCH OPTIONS (if any)

JQUERY UI AUTOCOMPLETE OPTIONS

The same options which you can use in jQuery UI Autocomplete, but if you would like to use your own eg. select function default will be executed and then yours.

Default options:
minLength : 1,
delay : 100

List of functions which will be executed right after default one is done:
search, select, change, focus, open, close.

Function source can’t be changed.

You can also change the way how list of searched results is rendered and messages which are rendered when nothing is found.
_renderItem : function(ul, item) { your instructions for rendering }
_renderNotFoundKeywordMessage : function(request) { should return string (message for user), what user typed into input is request.term }
_renderNotFoundURLMessage : function(request) { as above, but this method is called when user put fanpage’s url into input }

FB SEARCH OPTIONS

img – path to image which will be used as (or instead of) facebook icon (default is “/facebook-search-icon.png”)
result – type of result which will be in search input. I mean attribute of searched fanpage. Possible values: “url”, “name” (default)
limit – how many search results should be displayed (default is 10)
start_with_icon – if plugin, when called, should on initialization set icon (default is false)
icon – element which should be your icon
image – element which should be used to set a fanpage’s image (on default it’s icon – if any). It should be an image tag.
facebook_id – element which should be used to set a fanpage’s facebook_id. It should be a form field.
url – element which should be used to set a fanpage’s url. It should be a form field.
name – element which should be used to set a fanpage’s name. It should be a form field.
image_url – element which should be used to set a fanpage’s image url. It should be a form field.
link – element which should be used as link to a fanpage. It should be a link.

You can specify any of the aboved elements as string (selector for jQuery) or jQuery element.

You can specify also prefix to match above elements against eg. :
$(“#website_fanpage_url”).fbsearch({ prefix: “website” });

then plugin will try to match other elements against the pattern: prefix + “_” + name of an fanpage’s attribute (listed above)

You can also use both methods: matching against the pattern with prefix and explicitly set any of element (icon, image, facebook_id, url, name, image_url, link).
Plugin tries to match elements set explicitly and then tries to match against pattern with prefix. If some elements are set explicitly, they won’t be matching against pattern.

What plugin doesn’t do?

Plugin doesn’t use any internal CSS, you have to specify it on your own.
Plugin doesn’t contain neither jQuery UI Autocomplete javascript nor Facebook API.
It doesn’t contain jQuery-busy as well.

What you should remember about?

When calling plugin with options, don’t forget about curly braces inside parenthesis.
If you only want to fetch some information (eg. likes), in parenthesis write only certain string (eg. “likes”).