Selectable non selected values

Question

I have a requirement that a user can pick 4 names from autocomplete and specify one of those will be primary name. When submiingt the form, I should capture all 4 values from the server and identify which one is primary . I am planning to use selectable widget. Is there any way I can pass selected value along with other unselected values as well in the below example? here is the fiddle sample JSFIDDLE DEMO

$("#selectable").selectable({
    stop: function() {
        var items = '';
        var result = $("#select-result").empty();
        $(".ui-selected", this).each(function() {
            var index = $("#selectable li").index(this);
            items += (" #" + (index + 1));
        });
        alert('You have selected: ' + items);
        $('input[name="horario"]').val(items);
    }
});

Answer 1

You can do as the following, using this selector you get the unselected items:

$(this).children().not(".ui-selected").each(function() {
                var index = $("#selectable li").index(this);
                items2 += (" #" + (index + 1));
            });

using this binding on the element it will be unselected when you click on it, so you don't need a remove button-icon:

.bind( "mousedown", function ( e ) {
        e.metaKey = true;
    } ).

Code:

$("#selectable").bind( "mousedown", function ( e ) {
    e.metaKey = true;
} ).selectable({
    stop: function() {
        var items = '';
        var items2 = '';

        var result = $("#select-result").empty();
        $(".ui-selected", this).each(function() {
            var index = $("#selectable li").index(this);
            items += (" #" + (index + 1));
        });
        $(this).children().not(".ui-selected").each(function() {
            var index = $("#selectable li").index(this);
            items2 += (" #" + (index + 1));
        });
        $('input[name="horario"]').val(items+"-->"+items2);
    }
});

Demo: http://jsfiddle.net/IrvinDominin/bZKt6/

Answer 2

Sorry for answring my question.

Thank you very much for the solution. I tried outing some code in fiddler but not able to get it work dues to some dependencies. But I will try to explain step by step the requirement and what I have done so far.

1. User should be able to search an agent name in autocomplete and clicks add. Autocomplete is making an Ajax call to server to get the names and unique id’s.
2. Should be allowed to add maximum 4 and minimum 1. Should be able to deleted added name(Just by mistake if he adds wrong name)
3. Currently I am using appenTo function and dynamically creating input boxs with selected value 4 times. Input name = Agent + indexValue ex: Agent1, Agent2Agent3 and Agent4.
4. Need to give an option to select one of those names as primary.Thought of adding a radio button next to text box.
5. I have a submit button that submits form to the server. Where I am trying to see the value with alert for those dynamically generated input filed values and getting undefined. var agt1 =$("#Agent1").val(); alert (agt1); //Undefined error. Even if I make it work, input value is (Ex: John Dow) is not something I want to submit to server, instead id of that name. So I decided input box idea is not going to work and then trying to switch to selectable widget. But here also it seems we cannot pass ID of the selected item.

I think what I need is like creating a select box with multi select true and then add options to the select box dynamical when clicking add agent button (Track 4 times) add John Dow Matt Damn Tom Cruice Brad Pitt pass all max 4 option values to the server and indicate 25 is selected.

If you have any better option, please let me know, I would like to try. Thank You.

http://jsfiddle.net/XYr3t/

if($('#container').find('.agent').length < 4) {
            var len = $('#container').find('.agent').length;
            var index = len+1;

$('#container').append('<div><label >Agent' +index+ '</label><input   class="agent" id ="Agent" '+ index +' name ="Agent" '+ index +' type="text" value ="'+agent+'"><span class="remove" ><div class="ui-state-default ui-corner-all"><span style="padding-left:3px" class="ui-icon ui-icon-minusthick"></span></div></span></div>');

            $( '[name=selectAgent]' ).val('');      
         }else{
        $.msgBox({
        title:"Agent Name",
        content:"You cannot add more than 4 Agents!"
    });
    }
})


 $('body').on('click', '.remove', function() {
    if($('#container').find('.agent').length > 0) {
     $(this).parent().remove();
    }
})