Loading ...
Sorry, an error occurred while loading the content.

simple yui combobox?

Expand Messages
  • Joelle Lam
    Is there a simpler way to create a combo box using the YUI library? I currently using one from the menu button samples
    Message 1 of 4 , Nov 19, 2007
    • 0 Attachment
      Is there a simpler way to create a combo box using the YUI library? I
      currently using one from the menu button samples
      (http://developer.yahoo.com/yui/examples/button/btn_example07.html).
      I have found that using it not as straight forward as you need to add
      listeners to each of the menu items etc.

      Is there not a straight forward widget I can use to create a simply comboBo?

      If the current way that I am using it is standard, I am beginning to
      think that I should just use a generic combo box with style sheet additions.

      > <input type="menu" id="citybutton" name="citybutton" value="Select
      > City" >
      > <select id="citybuttonselect" name="citybuttonselect">
      > <option value="0">Atherton</option>
      > <option value="1">Cupertino</option>
      > <option value="2">Los Gatos</option>
      > <option value="3">Other</option>
      > </select>
      > <script type="application/javascript">
      > function onCityButtonReady () {
      > var Dom = YAHOO.util.Dom;
      > var Event = YAHOO.util.Event;
      > var oMenuButton1 = new YAHOO.widget.Button("citybutton", {
      > type: "menu",
      > menu: "citybuttonselect",
      > });
      > oMenuButton1.getMenu().mouseUpEvent.subscribe(function(ev,
      > args) {
      > var opt = args[1].srcElement;
      > oMenuButton1.set("value", opt.text);
      > oMenuButton1.set("label", opt.text);
      >
      > });
      >
      > }
      > YAHOO.util.Event.onContentReady("citybutton", onCityButtonReady);
      > </script>
    • Todd Kloots
      Joelle - Can you provide more information about the issue that you having with the Menu Button examples? What specifically are you trying to accomplish and
      Message 2 of 4 , Dec 4, 2007
      • 0 Attachment
        Joelle -

        Can you provide more information about the issue that you having with
        the Menu Button examples? What specifically are you trying to
        accomplish and what don't you find to be straight forward? I'd be happy
        to help you and would appreciate any feedback you might have so that I
        can make future versions of the control more usable.

        - Todd

        Joelle Lam wrote:
        >
        > Is there a simpler way to create a combo box using the YUI library? I
        > currently using one from the menu button samples
        > (http://developer.yahoo.com/yui/examples/button/btn_example07.html
        > <http://developer.yahoo.com/yui/examples/button/btn_example07.html>).
        > I have found that using it not as straight forward as you need to add
        > listeners to each of the menu items etc.
        >
        > Is there not a straight forward widget I can use to create a simply
        > comboBo?
        >
        > If the current way that I am using it is standard, I am beginning to
        > think that I should just use a generic combo box with style sheet
        > additions.
        >
        > > <input type="menu" id="citybutton" name="citybutton" value="Select
        > > City" >
        > > <select id="citybuttonselect" name="citybuttonselect">
        > > <option value="0">Atherton</option>
        > > <option value="1">Cupertino</option>
        > > <option value="2">Los Gatos</option>
        > > <option value="3">Other</option>
        > > </select>
        > > <script type="application/javascript">
        > > function onCityButtonReady () {
        > > var Dom = YAHOO.util.Dom;
        > > var Event = YAHOO.util.Event;
        > > var oMenuButton1 = new YAHOO.widget.Button("citybutton", {
        > > type: "menu",
        > > menu: "citybuttonselect",
        > > });
        > > oMenuButton1.getMenu().mouseUpEvent.subscribe(function(ev,
        > > args) {
        > > var opt = args[1].srcElement;
        > > oMenuButton1.set("value", opt.text);
        > > oMenuButton1.set("label", opt.text);
        > >
        > > });
        > >
        > > }
        > > YAHOO.util.Event.onContentReady("citybutton", onCityButtonReady);
        > > </script>
        >
        >
      • Filip
        I have the same question. I want to show an editable combobox like most users are used to have in desktop applications. The YUI Autocomplete component can be
        Message 3 of 4 , Apr 27, 2008
        • 0 Attachment
          I have the same question. I want to show an editable combobox like most
          users are used to have in desktop applications.

          The YUI Autocomplete component can be used for this but doesn't have
          the dropdown button with which a user can "dropdown" the list himself.

          The menu example isn't editable to the user and also doesn't look
          familiar like a combobox.

          I suppose I can add a button next to the Autocomplete component, but I
          don't see a method that I could call to display the popup when the user
          presses the button.

          Anyway, I think this would be something that should be added as a
          component to YUI.
        • ng.kaye
          Although this feature isn t provided by YUI, I managed to implement this by doing the following: button.onclick = function() { if
          Message 4 of 4 , May 1, 2008
          • 0 Attachment
            Although this feature isn't provided by YUI, I managed to implement
            this by doing the following:

            button.onclick = function() {
            if (!autoCompObj.isContainerOpen()) {
            // Show the drop down, if it isn't already up
            autoCompObj._toggleContainer(true);

            }

            // Populate the list. I've just chosen to show everything, when they
            click on this button.
            autoCompObj._populateList("", autoCompObj.dataSource.data, autoCompObj);
            }

            where autoCompObj is the YUI auto complete object.

            You'll also need to hack the YUI autoComplete.js. Assuming that you're
            using 2.5.1 - in the function _populateList() comment out

            if(!oSelf._bFocused || !aResults) {
            return;
            }

            and replace it with:

            if(!aResults) {
            return;
            }

            The oSelf._bFocused basically checks to see if the control has focus
            before it tries to populate the list. Since you're clicking on a
            button to populate the list, the auto complete control doesn't have
            focus and therefore the drop down won't appear. Hence we need to
            remove the check.

            Hope this helps.

            Cheers,
            Kaye.


            --- In ydn-javascript@yahoogroups.com, "Filip" <filip.hoeven@...> wrote:
            >
            > I have the same question. I want to show an editable combobox like most
            > users are used to have in desktop applications.
            >
            > The YUI Autocomplete component can be used for this but doesn't have
            > the dropdown button with which a user can "dropdown" the list himself.
            >
            > The menu example isn't editable to the user and also doesn't look
            > familiar like a combobox.
            >
            > I suppose I can add a button next to the Autocomplete component, but I
            > don't see a method that I could call to display the popup when the user
            > presses the button.
            >
            > Anyway, I think this would be something that should be added as a
            > component to YUI.
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.