Combo box

[GoogleCodeExporter]

Implement combobox functionality on dropdowns that have "-" as one of the 
values in the list.

The hyphen won't show in the selection and the dropdown will be editable.

Lots of plugins around to do this. Let's pick the most supported and most 
usable one.

Discuss the choice first.
Adding another dependency is just adding more hassles down the track, so better 
be careful what we pick.

Original issue reported on code.google.com by zetapri...@gmail.com on 16 Feb 2011 at 12:27

[GoogleCodeExporter]

Tested on
http://ec2-174-129-95-130.compute-1.amazonaws.com/magedev/index.php/default/test
/t-shirt-01.html

Works ok in all browsers. Some minor differences (a pixel off or on here and 
there) but, since that's the best you can do to unify across browsers, we'll 
have to live with it.

Original comment by agur...@gmail.com on 3 Mar 2011 at 10:56

• Changed state: TestOK

[GoogleCodeExporter]

Original comment by zetapri...@gmail.com on 4 Mar 2011 at 4:00

• Changed state: Docos
• Added labels: Period-2011-02

[GoogleCodeExporter]

Docos:
Provide Combo Box functionality for certain select elements.
Select elements that will get this functionality must have an option element 
with content '-' (dash).
If such option is detected, it is removed and entire select element becomes 
combobox.
To achieve this - jquery autocomplete plugin is used with modifications to 
allow 
adding new content to the list.
With this functionality user can: click on element arrow and select an option 
form the menu, click in the input field and start typing and choose option from 
autocomplete that pops up, click in input field and enter entirely new text 
that 
will be added to the list of options until user leaves the page.
Regardless which of the above options is used, the value of the input field will
be used for passing data upon form submit.

To enable combo box you need to include in specified order:
{{{
<script type="text/javascript" src="jquery.js"></script> <!-- Base jQuery 
library -->
<script type="text/javascript" src="ui/jquery.ui.core.js"></script> <!-- Core 
part of jquey UI library -->
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script> <!-- 
Widget part of jquey UI library -->
<script type="text/javascript" src="ui/jquery.ui.button.js"></script> <!-- 
Button part of jquey UI library -->
<script type="text/javascript" src="ui/jquery.ui.position.js"></script> <!-- 
Position part of jquey UI library -->
<script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script> 
<!-- Autocomplete part of jquey UI library -->
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.js"></script> <!-- 
jQuery tooltip plugin -->
<script type="text/javascript" src="js/combobox.js"></script> <!-- Actual 
combobox plugin -->
}}}

For production environments it is recommended to minify and compress above 
files 
in to 1 javascript file.

To scan all select elements and determine which should get this feature add 
following code in actual html document or an external javascript file that is
loaded after above references:

{{{
        jQuery(window).load(function(e){
            $('select').each(function(){
                var $self = $(this);
                var isCombo = false;
                var $children = $self.children('option');
                $children.each(function(){
                    var $opt = jQuery(this);
                    if ($.trim($opt.text()) == '-') {
                        isCombo = true;
                        $opt.remove();
                    }
                });
                if (isCombo) {
                    var combo = $self.wrap('<div class="ui-widget"/>').combobox();
                }
            });
        });
}}}

For styling add:

{{{
<link type="text/css" href="css/combobox.css" rel="stylesheet"/>
}}}

Make sure that href points to correct path for combobox.css file.

Original comment by jamb...@gmail.com on 4 Mar 2011 at 11:24

[GoogleCodeExporter]

The above is in this wiki page 
http://code.google.com/p/magento-w2p/wiki/ComboboxDocs

Original comment by jamb...@gmail.com on 4 Mar 2011 at 11:30

[GoogleCodeExporter]

Is description good enough?

Original comment by jamb...@gmail.com on 7 Mar 2011 at 2:29

• Changed state: ToTest

[GoogleCodeExporter]

Can't say that the description helps me understand integration but then again, 
it is not intended for a non-developper, I guess.

The wiki page it self should be sufficient as a technical explanation.

As far as the help post is concerned: this comes with our w2p extension, right? 
It is built in as a feature and shows up (as a combobox) for any w2p template 
that has "-" (dash) as one of the options, right?

Original comment by agur...@gmail.com on 7 Mar 2011 at 4:10

• Changed state: MoreWork

[GoogleCodeExporter]

Yes currently it is like that. More over that base part of the code was 
borrowed from a jQuery demo and modified to fit our needs so releasing this 
outside w2p make no sense I think.
What more work is expected by me here?

Original comment by jamb...@gmail.com on 7 Mar 2011 at 4:30

[GoogleCodeExporter]

Nothing from you. 
The rest is me writing a help post.

Original comment by agur...@gmail.com on 7 Mar 2011 at 4:37

• Changed state: Docos

[GoogleCodeExporter]

Sorry, but no. This is not how it works. Back when I tested it, I asked weather 
"this comes with our extension". It does not!

If this option comes built in with our extension, then my help post will simply 
explain that adding a "-" dash activates a combo-box and explain what that 
combobox does.

Since it doesn't. The wiki is worthless regarding activation instructions. I 
need to be able to explain how to activate it. Can't do this if I don't know 
which files to edit, what JS files to add, where etc...
Please add useful info to:
http://code.google.com/p/magento-w2p/wiki/ComboboxDocs

Original comment by agur...@gmail.com on 27 Apr 2011 at 2:12

• Changed state: MoreWork

[GoogleCodeExporter]

Now I don't see how the fact that this is not added to the extension should 
reopen this issue??? This is not working if not in w2p - so ask it to be 
included.

Original comment by jamb...@gmail.com on 27 Apr 2011 at 3:19

[GoogleCodeExporter]

All I can do with these instructions is explain how to assign a combobox drop 
down to a field. Not how to actually activate the combobox feature in a store.

Original comment by agur...@gmail.com on 27 Apr 2011 at 4:28

[GoogleCodeExporter]

Yes, you are not supposed to activate it, it should be built in w2p otherwise 
it is useless.

Original comment by jamb...@gmail.com on 27 Apr 2011 at 4:33

[GoogleCodeExporter]

Original comment by jamb...@gmail.com on 2 May 2011 at 8:56

• Changed state: ToTest

[GoogleCodeExporter]

Original comment by Anatoly....@gmail.com on 2 May 2011 at 10:25

• Changed state: Merge

[GoogleCodeExporter]

It's not merged yet.

Original comment by Anatoly....@gmail.com on 2 May 2011 at 10:25

[GoogleCodeExporter]

Petar, can you post an issue for Anatoly to merge it?
He doesn't see this task in his list unless it is assigned to him.
Then we can close this one.

Let's create new tasks for anything that needs to be merged from now on.

Original comment by ad...@zetaprints.com on 16 May 2011 at 10:48

• Changed state: MoreWork

[GoogleCodeExporter]

http://code.google.com/p/magento-w2p/issues/detail?id=557

Original comment by jamb...@gmail.com on 19 May 2011 at 9:52

• Changed state: ToTest

[GoogleCodeExporter]

Posting issues and bugs as part of the "merge" issue:
http://code.google.com/p/magento-w2p/issues/detail?id=557

this one is already pretty full. Can be closed.

Original comment by agur...@gmail.com on 26 May 2011 at 1:35

• Changed state: TestOK

[GoogleCodeExporter]

Original comment by ad...@zetaprints.com on 11 Jun 2011 at 2:21

• Changed state: Docos

[GoogleCodeExporter]

http://www.zetaprints.com/magentohelp/combo-box-functionality/
post ready for review

Original comment by agur...@gmail.com on 21 Jun 2011 at 5:42

• Added labels: Help-V
• Removed labels: Help-X

[GoogleCodeExporter]

Original comment by ad...@zetaprints.com on 12 Jul 2011 at 11:16

• Changed state: Done