FCBKcomplete v 2.8.4
Fancy facebook-like dynamic inputs with auto complete & pre added values. If you have any comments or requests, please post them and I will try to include all the requested features in the upcoming release.
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
frankeyboard
March 31, 2009
I tried with the new version 2.0. Unfortunately the problem is not fixed. This is my test: I used the example “FCBKcomplete Demo” without changing anything but the form submit on my asp page only the selected values and not the values manually entered in the text-field.
If I select “test1″, “test2 or “test3″ everything works, but if I enter a value manually in the text-input (eg. “hello world”) this value is not sent to the asp script.
Basically the kit works as a selection tool but not as an input tool. Does it?
yura
March 31, 2009
it will be nice to put focus on the input after selecting tag
justin
March 31, 2009
I tried version 2.0 this morning and most of it works well, but if you supply data not through ajax, when you type it doesn’t filter down results even with filter_hide: true. It just keeps every result on the screen as you continue to type.
admin
March 31, 2009
@justin: What browser do you use?
@yura: Ok will implement it in next version
@frankeyboard: I didnt test it with dot.net yet, but I will try tomorow, about selection and input it`s more easy to work with html select then other html element ( and this control remind more select with multiply then regular input).
justin
March 31, 2009
I use Firefox 3.0.8, Opera 9.63 seems to have the same problem.
justin
March 31, 2009
This is also the same for IE 8 (sorry for the extra comment)
frankeyboard
April 1, 2009
Thank you admin.
Maybe it’s better if I explain how I would use this control so you can tell me if I’m wrong.
I have an input box in my page where the user must enter a list of tags/keywords. Up to now the user wrote the tags manually and had to remember the values previously entered. Your control is fantastic because it offers the chance to show the list of all the tags already entered and select from this list. But the user should still be able to insert a new tag (or more) that does not exist in the list. That’s why I need that the values selected from the list AND the values manually inserted (in your input-box) to be submitted.
Is it possible?
Rob
April 1, 2009
Great control!
Just a few notes on usability –
(1) each element that the user has selected should be selectable
(2) the element can be removed by either clicking the X (which is done) or by pressing backspace when the element is selected
(3) when the user is typing in the autocomplete box, backspacing (when no text is entered) selects the previous element (thus backspacing twice deletes the previous element)
Chris
April 1, 2009
Looks great, nice job!
One small thing however. The input tag in the control has a border in IE7, you can remove it by setting “border: 0 none” for the ul.holder li.bit-input input class.
Craig
April 7, 2009
Just to add some feedback (great plugin, btw).
The standard jQuery plugin behaviour is to iterate over each match and apply the plugin separately. Currently, you can’t target a class or all select elements for example, to apply the plugin.
See: http://docs.jquery.com/Plugins/Authoring
Specifically, “You should use this.each to iterate over the current set of matched elements – it produces clean and compatible code that way.”
Otherwise, great work! Thanks!
Craig
April 7, 2009
@justin – the fix is to add defaultFilter(etext); to addInput->input.keyup->last else block after bindEvents()
frankeyboard
April 8, 2009
Hi Admin,
no news about the issues on the text-input field?
admin
April 8, 2009
@frankeyboard: I`m working on new version and I wil try to include fix for all of your errors/bugs.
I believe that new release will be ready at the end of this week
frankeyboard
April 9, 2009
Great!!!
Thank you very much admin!
mcz
April 10, 2009
very good plugin. nice job.
i found a bug under firefox 3.1 beta, if you start typing something thats not on the autocompletion list (some random word) and you hit ENTER without selecting anything from the listbox, wierd empty box is added to the textbox as a new tag.
santo
April 11, 2009
I’m try to use this to substitute the tag input of my site.
I’m using multiple tags so this looks perfect, but if I have a message with 3 tags and I want to edit, how can I do?
Tried to put this:
a
a
c
but only last one is visible and in my case I need to show all of them. Any suggestion?
santo
April 11, 2009
Ooops, this comment system doesn’t support code input?
Aniway, the 3 data abowe was option tags with 3 different values all select = selected
Roman
April 13, 2009
I think there’s a bug in how “input.keyup” event is handled in this version. Towards the end of the event handler you’re calling defaultFilter with no arguments (like so):
else {
defaultFilter();
bindEvents();
}
That causes a null reference exception (or the javascript equivalent of it) to be thrown in the defaultFilter method (here):
flag = item.text().indexOf(input.toLowerCase());
Fixing the call to defaultFilter to pass etext as the argument should fix the problem. Sorry for lack of line numbers, it looks like visual studio re-formatted the file and added extra linebreaks.
Roman
April 13, 2009
Another (possibly stupid) question, in “function createFCBK()” you hide the select element used to generate the list of items and set it to allow multiple selections (which makes sense), but I’m not sure why you’re changing the name of the element (this kinda breaks asp.net postbacks because selected items don’t get re-selected properly serverside) and I was wondering if it’s safe to take that section out. It doesn’t look like the name attribute is used anywhere else in the plugin.
if (element.attr(“name”).indexOf(“[]“) == -1) {
element.attr(“name”, element.attr(“name”) + “[]“);
}
frankeyboard
April 14, 2009
Fantastic!
The input-text works perfectly now!
Perhaps debugging the code you have left something that you should remove from the demo. I can not say here what it is but it concerns the output of submit in http://www.emposha.com/demo/fcbkcomplete_2/
I think you can guess what I am talking about otherwise write me in private please.