Download: Download FCBKcomplete

Demo: Demo FCBKcomplete

GitHub: http://github.com/emposha/FCBKcomplete

Dot.Net: http://kostab.blogspot.com/2010/12/fancy-facebook-like-auto-complete-using.html

Please use github for bug report

Usage:

$("element").fcbkcomplete({
json_url: "fetched.txt",
cache: true,
filter_case: true,
filter_hide: true,
newel: true
});


json_url                   - url to fetch json object
cache                        - use cache
height                       - maximum number of element shown before scroll will apear
newel                        - show typed text like a element
addontab         – add first show element on tab or enter hit
firstselected          - automaticly select first element from dropdown
filter_case              - case sensitive filter
filter_hide              - show/hide filtered items
filter_selected      - filter selected items from list
complete_text     - text for complete page
maxshownitems - maximum numbers that will be shown at dropdown list (less better performance)
maxitems              - maximum item that can be added to the list
onselect                 - fire event on item select
onremove             - fire event on item remove
delay                      - delay between ajax request (bigger delay, lower server time request)
attachto         – after this element fcbkcomplete insert own elements
bricket – use square bricket with select (needed for asp or php) enabled by default

Add item public method (how to use):
$(“elem”).trigger(“addItem”,[{"title": "test", "value": "test"}]);

Updates:

– 2.8.4 cache object fix by @tedberg

– 2.8.3 no more eval use
* public function addItem and removeItem fix (thanks to Yaron)

– 2.8.2 json_cache bug fix
* new option added “bricket”
* newel bug fix thanks to Matt

– 2.8.1 some minor bug fixes
* added selected attribute to preselected option thanks to @musketyr
* fixed cache entry with space thanks to Matt

– 2.8.0 bug fixes
* added jquery 1.6 support please note that old versions of jquery not supported
* cache mechanizm updated

New version of FCBKcomplete can be found here

Download: Download FCBKcomplete

Demo: Demo FCBKcomplete

Use:

<script language="JavaScript">
$(document).ready(function() {
$.facebooklist('#elem', '#list', '#complete',{url:'ajax-url',cache:1}, height, {userfilter:1,casesensetive:0});
});
</script>

* This source code was highlighted with Source Code Highlighter.

elem – input element id or object
list – preadded elements
complete – autocomplete div id or object
ajax – object with two parametrs a) url to fetch json object b) use cache
height – maximum number of element shown before scroll will apear
filter – object with two parametrs a)case sensitive b) show/hide filtered items
newel – show typed text like a element

Creditrs for CSS & HTML structure: Guillermo (http://devthought.com)

Updates:

- 1.09 IE crash fixed

- 1.08 some minor bug fixed

-1.07  case sensetive added
applied filter to non ajax items
filter algorithm changed
cache for ajax request added
up/down with auto scrolling
minor code fixes

- 1.06 auto heigth fix
event bind on main element for better user frendly experience
filter for items
up/down keys supported from now

- 1.05 bindEvents function fixed thanks to idgnarn

- Name changed to FCBKcomplete

- 1.04 IE7 <em> tag replace fixed

- 1.03 IE7 & IE6 crash fixed
IE7 css fixed

- 1.02 json parsing fixed
remove element fixed

- 1.01: some bugs fixed

Description: Two froms with element with same id in both of them, trying to use jquery selector to choose one of them like this $(“#formid #elemid”). Result will be null.

Example:

HTML:

<form id="form1" method="post" action="/">
<input type="text" class="inputtext" id="text1" name="text1" value=""/>
<input type="text" class="inputtext" id="text2" name="text2" value=""/>
<input type="text" class="button" id="btn1" value="press me"/>
</form>

<form id=”form2″ method=”post” action=”/”>
<input type=”text” class=”inputtext” id=”text1″ name=”text1″ value=”"/>
<input type=”text” class=”inputtext” id=”text2″ name=”text3″ value=”"/>
<input type=”text” class=”button” id=”btn2″ value=”press me2″/>
</form>

* This source code was highlighted with Source Code Highlighter.

Javascript:

$('#btn1').click(function() {
if (!$('#form1 #text1').val()) {
$('#form1 #text1').css('border','1px solid red');
}
if (!$('#form1 #text2').val()) {
$('#form1 #text2').css('border','1px solid red');
}
});

$(‘#btn2′).click(function() {
if (!$(‘#form2 #text1′).val()) {
$(‘#form2 #text1′).css(‘border’,’1px solid red’);
}
if (!$(‘#form2 #text2′).val()) {
$(‘#form2 #text4′).css(‘border’,’1px solid red’);
}
});

* This source code was highlighted with Source Code Highlighter.

If you have any comments or requests, please post them and I will try to include all the requested features in the upcoming release.

HowTo:

1) HTML stracture:

<ul id="ulid">
<li>regular content <input type="hidden" value="value" /></li>
<li>preselected content <input type="hidden" value="value" checked="checked" /></li>
<li>regular content <input type="hidden" value="value" /></li>
</ul>

* This source code was highlighted with Source Code Highlighter.

2) Javascript:

<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
//id(ul id),width,height(element height),row(elements in row)
$.fcbkListSelection(id[ul id],width,height[element height],row[elements in row]);
});
</script>

* This source code was highlighted with Source Code Highlighter.

Changelog:
- 1.1: added preselected items
- 1.0: project started

Download: Download fcbkListSelection

Demo: Demo fcbkListSelection

Github: http://github.com/emposha/fcbkListSelection