[jQuery] Re: Identifying a specific UI element

[Jason Huck]

Funny you should ask. I had the same need recently, and couldn't find
exactly what I was looking for, so I rolled my own. I discuss the
basic left/right combo-select-box part here:

http://devblog.jasonhuck.com/2008/03/08/combo-select-boxes-in-jquery/

As for the auto-complete part, I used the PengoWorks variation of the
autocomplete plugin, and used the onItemSelect callback it provides to
populate the lists with $.getJSON(). A generic version of that code,
modified to match the example from the blog entry, is included below:

// retrieves details about the selected item
function selectItem(li){
        var pcode = $(li).text();
        $.getJSON('./?code=' + pcode, function(json){
                // clear any previous selections
                $('#lettersleft').append($('#lettersright option'));

                var letters = json.letters;
                for(i=0;i<letters.length;i++){
                        $('#lettersright').append($('#lettersleft 
option[value="' +
letters[i] + '"]'));
                }

                sortBoxes();
        });
}

// autocomplete for product code field
$('#item').autocomplete(
        '/path/to/autocomplete/results/',
        {
                autoFill: true,
                minChars: 2,
                cacheLength: 10,
                selectOnly: true,
                extraParams: {t: 'item'},
                onItemSelect: selectItem
        }
);


Hopefully that's at least enough to get you pointed in the right
general direction.

- jason




On Mar 7, 5:40 pm, "Dinesh B Vadhia" <[EMAIL PROTECTED]>
wrote:
> Hello!  I wonder if you can help as I'm new to JQuery.  I'm looking for a 
> particular UI element which can be seen used on many GUI applications but 
> whose name I don't know.  Here is what it does:
>
> - Consider a long list of short phrases - possibly, a list of thousands of 
> short phrases
> - Search with autocompletion for a phrase in SearchBox
> - The LeftBox underneath the SearchBox displays a number of phrases
> - LeftBox has scroll bars
> - When a user finds and selects a phrase they can move it to an adjacent 
> RightBox by clicking the Move button in the MiddlePanel which sits between 
> the LeftBox and RightBox.
> - The MiddlePanel also has a Remove button to remove selected items from the 
> RightBox
>
> That's it.  If I can find out what the name of this UI element is I can then 
> see if a JQuery plugin or code exists.  Thanks!
>
> Dinesh