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

Using AutoComplete Widget for Navigation

Expand Messages
  • aqhost
    Currently using an AutoComplete instance to create a search feature for an ecommerce site. The data source is a MySQL database containing product names,
    Message 1 of 3 , Mar 28, 2008
    • 0 Attachment
      Currently using an AutoComplete instance to create a search feature
      for an ecommerce site. The data source is a MySQL database containing
      product names, descriptions, and URLs. So far so good. The data
      source is returning the product name and URL, and the name gets
      displayed in the AutoComplete text box. The name is linked to the URL
      so that if you click the product name, you get taken to the product's
      page on the site.

      myAutoComp.formatResult = function(aResultItem, sQuery)
      {
      var myURL = aResultItem[1];
      var myText = aResultItem[0];
      if (myURL == "NOURL")
      {
      var sMarkup = myText;
      }
      else
      {
      var sMarkup = '<a href="' + myURL + '">' + myText
      + '</a>';
      }
      return (sMarkup);
      }

      The problem is that this works great for mouse clicks, but not for
      anyone who uses the Enter key. Additionally only the product name is
      actually a live link whereas it would be preferable for the whole
      <li> element to be linked. Any clues on resolving these problems
      please?
    • Fiouz
      Hi, ... Try using the itemSelectEvent[1] provided by the AutoComplete class instead: myAutoComp.itemSelectEvent.subscribe(function (eventType, eventArgs) { var
      Message 2 of 3 , Mar 28, 2008
      • 0 Attachment
        Hi,

        On Fri, Mar 28, 2008 at 5:34 PM, aqhost <aqhost@...> wrote:
        > The name is linked to the URL
        > so that if you click the product name, you get taken to the product's
        > page on the site.
        >
        > myAutoComp.formatResult = function(aResultItem, sQuery)
        > {
        > var myURL = aResultItem[1];
        > var myText = aResultItem[0];
        > if (myURL == "NOURL")
        > {
        > var sMarkup = myText;
        > }
        > else
        > {
        > var sMarkup = '<a href="' + myURL + '">' + myText
        > + '</a>';
        > }
        > return (sMarkup);
        > }
        >
        > The problem is that this works great for mouse clicks, but not for
        > anyone who uses the Enter key. Additionally only the product name is
        > actually a live link whereas it would be preferable for the whole
        > <li> element to be linked. Any clues on resolving these problems
        > please?

        Try using the itemSelectEvent[1] provided by the AutoComplete class instead:

        myAutoComp.itemSelectEvent.subscribe(function (eventType, eventArgs) {
        var item = eventArgs[2];
        var url = item[1];
        if (url !== "NOURL") {
        window.location.href = url;
        }
        });

        Regards,

        [1] http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#event_itemSelectEvent

        --
        Fiouz
      • aqhost
        That nailed it, thank-you! ... product s ... for ... name is ... eventArgs) { ... http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#eve
        Message 3 of 3 , Apr 2, 2008
        • 0 Attachment
          That nailed it, thank-you!

          --- In ydn-javascript@yahoogroups.com, Fiouz <fiouzy@...> wrote:
          >
          > Hi,
          >
          > On Fri, Mar 28, 2008 at 5:34 PM, aqhost <aqhost@...> wrote:
          > > The name is linked to the URL
          > > so that if you click the product name, you get taken to the
          product's
          > > page on the site.
          > >
          > > myAutoComp.formatResult = function(aResultItem, sQuery)
          > > {
          > > var myURL = aResultItem[1];
          > > var myText = aResultItem[0];
          > > if (myURL == "NOURL")
          > > {
          > > var sMarkup = myText;
          > > }
          > > else
          > > {
          > > var sMarkup = '<a href="' + myURL + '">' + myText
          > > + '</a>';
          > > }
          > > return (sMarkup);
          > > }
          > >
          > > The problem is that this works great for mouse clicks, but not
          for
          > > anyone who uses the Enter key. Additionally only the product
          name is
          > > actually a live link whereas it would be preferable for the whole
          > > <li> element to be linked. Any clues on resolving these problems
          > > please?
          >
          > Try using the itemSelectEvent[1] provided by the AutoComplete class
          instead:
          >
          > myAutoComp.itemSelectEvent.subscribe(function (eventType,
          eventArgs) {
          > var item = eventArgs[2];
          > var url = item[1];
          > if (url !== "NOURL") {
          > window.location.href = url;
          > }
          > });
          >
          > Regards,
          >
          > [1]
          http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#eve
          nt_itemSelectEvent
          >
          > --
          > Fiouz
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.