FCBKcomplete v 2.8.4

2009-04-12_1411072

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

230 Responses

  1. 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?

  2. it will be nice to put focus on the input after selecting tag

  3. 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.

  4. @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).

  5. I use Firefox 3.0.8, Opera 9.63 seems to have the same problem.

  6. This is also the same for IE 8 (sorry for the extra comment)

  7. 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?

  8. 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)

  9. 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.

  10. 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!

  11. @justin – the fix is to add defaultFilter(etext); to addInput->input.keyup->last else block after bindEvents()

  12. Hi Admin,
    no news about the issues on the text-input field?

  13. @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

  14. Great!!!
    Thank you very much admin!

  15. 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.

  16. 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?

  17. Ooops, this comment system doesn’t support code input?
    Aniway, the 3 data abowe was option tags with 3 different values all select = selected

  18. 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.

  19. 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”) + “[]“);
    }

  20. 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.

Tag Cloud

TwitterAll tweets

Please wait while our tweets load indicator