How to get ids when a value is selected in fcbkcomplete? - jsfiddle added

Question

Please go through the below fiddle. I am trying to get the ids of the selected products in the fcbkcomplete box and show it as comma separated values in the textbox with id="interest". I wrote a function to achieve that but it didn't work. The function adds the id of the first value and not taking the ids of the other values which are added in the multiple selection box.

http://jsfiddle.net/balac/xDtrZ/1/

I have added json.txt. it contains datas like this

[{"key":"2", "value":"Canon Powershot "},{"key":"3", "value":"Fastrack Bag"},{"key":"4", "value":"Iphone 4 "},{"key":"5", "value":"Levis Jeans"},{"key":"7", "value":"Indig"},{"key":"8", "value":"Dashing Cars"},{"key":"9", "value":"dsdas"},{"key":"10", "value":"fsfs"}]

In the above json value key is the id which I want to display in the textbox as comma separated values. value is the value which will be coming in the dropdown for selection.

while selecting the values in the drop down i want the corresponding key to get added in the textbox as comma separated values.

The problem is that only the key of the first selected item is getting added in the textbox, no matter.

Hope am specific and said all in detail. if anyone want any clarification please ask me i will explain more.

Answer 1

I think I found a simpler solution for you. Keep in mind, due to the problems I mentioned in my comments I had to drastically simplify your fcbkcomplete code to get it working..

$(document).ready(function() {
    $("#select3").fcbkcomplete({
        addontab: true,
        maxitems: 10,
        input_min_size: 0,
        height: 10,
        select_all_text: "select",
        onselect: clicker
    });
});

var clicker = function() {
    var selected = new Array();

    $('option', this).each(function() {
        selected.push($(this).val());
    });

    $('#interest').val(selected.join(', '));
};

See it in action here.

Note: I had to manually add <option>'s to the select list to get fcbkcomplete to actually work right. But nevertheless, my logic should work for you regardless.

Also, fcbkcomplete apparently dynamically changes the <option>'s id to something like opt_vaQDzJU37ArScs818rc8HUwz9gm1wypP so I had to use the value instead. There are workarounds for that if you're dead set on using the id instead of the value.

To illustrate my point, modify the loop through each option like this:

$('option', this).each(function() {
    for (var i = 0; i < this.attributes.length; i++) {
        var pair = this.attributes[i].name + ': '
            + this.attributes[i].value;
        alert(pair);
    }
    selected.push($(this).val());
});

You will see how the attributes end up after fcbkcomplete runs.

Final Edit

After setting it up on localhost and using a JSON txt file, I was able to finally replicate the problem you were having. The thing is, the behavior totally changes when you use JSON instead of hard-coding the <option>s. Here is your working solution:

$(document).ready(function() {
    var clicker = function(e) {
        var selected = new Array();

        // using "this" here was out of context, use #select3
        $('option', $('#select3')).each(function() {
            selected.push(this.value);
        });

        $('#interest').val(selected.join(', '));
    };

    $("#select3").fcbkcomplete({
        json_url: "parseJSON.txt",
        addontab: true,
        maxitems: 10,
        input_min_size: 0,
        height: 10,
        select_all_text: "select",
        onselect: clicker
    }); 
});

Answer 2

Below link is example of getting value in fcbkcomplete on select. Same process you can do for id to. https://github.com/emposha/FCBKcomplete/issues/110 example how to use :

`//auto complete jquery starts here
     $("#box").fcbkcomplete({
                    width: 250,
                    addontab: true,                   
                    maxitems: 1,
                    input_min_size: 0,
                    height: 10,
                    cache: true,
                    filter_case: true,
                    filter_hide: true,
                    filter_selected: true,
                    newel: true,
                    filter_case:false,
                    onselect: function(item)
                    {
                        getting_value_dealer(item._value, item._id);
                    }
                });
    //auto complete jquery ends here
`