Announcement

Collapse
No announcement yet.

Power Search Auto Complete

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #61
    Re: Power Search Auto Complete

    Originally posted by KNewbrough View Post
    Hi Leslie,

    The appearance of a basic select dropdown sounds like missing CSS to me. Or do you mean to say it functions as expected and then when you try to submit the search it opens a dropdown instead? It would help to be able to see the feature in action - have you submitted a ticket to support for this yet? If so, can you post or PM me the ticket ID?

    Thanks
    Since this post is being referenced in another thread, I'm coming back to it because, yes I have opened a support ticket on it with Miva Support. I also have had Brennan looking at it. Yes, I sent a PM to Kyle. Yes, it appears to be some sort of CSS issue. I thought it might have been something javascript related but I still have the issue when I removed all other javascript from the test page. I also have an issue with only one of the form fields working, but at this point I've given up trying to figure out why the AUTO2 page doesn't work and while the AUTO1 page does.


    The problem that I can't seem to resolve is the appearance of a form style select menu below the form field after the keyword is completely typed.

    Here's the test page URL.
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    Comment


      #62
      Re: Power Search Auto Complete

      Update on this - I'm attempting a final implementation of this. I placed the working search field in what will be it's final location. I have a z-index problem using Firefox. The auto-select drops down behind any content on the page. Since placing the "working" search box into it's final location, the search box on the page no longer offers the auto-complete. A half step forward and 3 steps back...arggghhh.

      Again, here's the test URL
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #63
        Re: Power Search Auto Complete

        Hi Leslie,

        It looks like the feature is actually working as designed from what I can see on the page. That final dropdown is the same one as when there are multiple options - it just attempts to redraw itself as the appropriate size to fit the contents with each keyup. The script will hide the dropdown under a few circumstances, but the final match being identical to what the user has typed isn't one of them because it's expecting the user to select one of the autocomplete options from the dropdown every time. It would be possible to add that functionality to the script, though.
        Kyle Newbrough
        Technical Support / Web Developer
        Miva Merchant

        Comment


          #64
          Re: Power Search Auto Complete

          I guess I'm still confused because it doesn't behave this way on Bill's example. But I guess I'll have to live with it. The next question - how do I resolve the z-index issue. Depending upon the browser, the auto-complete list is behind content on the page.
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #65
            Re: Power Search Auto Complete

            Originally posted by lesliekirk View Post
            I guess I'm still confused because it doesn't behave this way on Bill's example. But I guess I'll have to live with it. The next question - how do I resolve the z-index issue. Depending upon the browser, the auto-complete list is behind content on the page.
            Okay, crow tastes like crow. I was able to see that second form select I've been harping about on Bill's site.

            If I can just figure out the z-index issue that is causing the dropdown menu to go behind the content on the page. I've tried applying it to the #topsuggestions div but that had no affect.

            Leslie
            Leslie Kirk
            Miva Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment


              #66
              Re: Power Search Auto Complete

              On your z-index issue, what happens when you change the z-index of the div to 999999 in Firebug or Chrome Inspect Element? Z-index issues are usually pretty straight forward.
              Jason Fancett
              America's SPA-MART - "Where Spa Owners Shop SMART!"
              Check us out for all of your hot tub needs including spa covers, spa filters, spa chemicals and more.
              Miva Merchant forum users can use coupon code MIVAFORUM to receive $5 off your first order of $30 or more.

              Comment


                #67
                Re: Power Search Auto Complete

                Originally posted by JFancett View Post
                On your z-index issue, what happens when you change the z-index of the div to 999999 in Firebug or Chrome Inspect Element? Z-index issues are usually pretty straight forward.
                I may have found the missing piece of the z-index puzzle - position! Doing some testing now and will report back.
                Leslie Kirk
                Miva Certified Developer
                Miva Merchant Specialist since 1997
                Previously of Webs Your Way
                (aka Leslie Nord leslienord)

                Email me: [email protected]
                www.lesliekirk.com

                Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                Comment


                  #68
                  Re: Power Search Auto Complete

                  Seems that was indeed the missing piece. Here's what I used:

                  Code:
                  <style type="text/css">
                  #suggestions {
                  position: relative;
                      z-index:9999;
                  }
                  #topsuggestions {
                  position: relative;
                  z-index:9999;
                  }
                  </style>
                  Leslie Kirk
                  Miva Certified Developer
                  Miva Merchant Specialist since 1997
                  Previously of Webs Your Way
                  (aka Leslie Nord leslienord)

                  Email me: [email protected]
                  www.lesliekirk.com

                  Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                  Comment


                    #69
                    Re: Power Search Auto Complete

                    Okay one more item (which I hope doesn't get lost in all of this) the current form field uses onBlur and onFocus to display the word Search in the box and to clear it when someone starts typing in the box.

                    Code:
                    <input type="text" name="Search" id="searchfield"        value="Search"onBlur="if(this.value=='')this.value='Search';"        onFocus="if(this.value='Search')this.value='';" />
                    The problem now is that after someone types their search phrase in, if you click the box it deletes what has been typed in. Can this be tweaked to only clear the word "Search"? Or is something else going on yet again?

                    I know Bill's example doesn't use this - his search box is a plain old-fashioned text field
                    Leslie Kirk
                    Miva Certified Developer
                    Miva Merchant Specialist since 1997
                    Previously of Webs Your Way
                    (aka Leslie Nord leslienord)

                    Email me: [email protected]
                    www.lesliekirk.com

                    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                    Comment


                      #70
                      Re: Power Search Auto Complete

                      That's a pretty old school technique. You can remove the word Search from the field and that javascript, and just put placeholder="Search" on the input. That's an HTML5 attribute which will perform the same thing without ever affecting the input's actual value.

                      Code:
                      <input type="text" name="Search" id="searchfield"        value="" placeholder="Search" />
                      Kyle Newbrough
                      Technical Support / Web Developer
                      Miva Merchant

                      Comment


                        #71
                        Re: Power Search Auto Complete

                        Thank Kyle!!!

                        For the sake of continuity of this thread it would be

                        Code:
                        <input type="text" name="Search" id="searchinput"  value="" placeholder="Search" autocomplete="off" />
                        or

                        Code:
                        <input type="text" name="Search" id="searchfield"  value="" placeholder="Search" autocomplete="off" />
                        The autocomplete=off needs to be included for the Power Search Auto-Search.

                        Leslie
                        Leslie Kirk
                        Miva Certified Developer
                        Miva Merchant Specialist since 1997
                        Previously of Webs Your Way
                        (aka Leslie Nord leslienord)

                        Email me: [email protected]
                        www.lesliekirk.com

                        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                        Comment


                          #72
                          Re: Power Search Auto Complete

                          Mine doesn't hide when the user clicks outside the search field. I can't seem to isolate how to have it do so. I'll play with it more later, but if someone has a quick snippet that causes it to hide the drop down once the form field is no longer active, that would be pretty dope.
                          Ted Hust
                          AarcMediaGroup.com

                          Celebrating 13 Years of Outstanding Service & Support
                          Miva Merchant Design

                          Comment

                          Working...
                          X