Announcement

Collapse
No announcement yet.

Search autosuggest position in custom page designs

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

    Search autosuggest position in custom page designs

    Whilst a great many customers are happy not to have autosuggest, some demand it.

    In a recent design which I developed, the autosuggest did not seem to work on my modified search box.

    Here is the box:

    Code:
    <div id="quick-search">
    <form name="simplesearch" method="get" action="<actinic:variable name="OnlineScriptURL" value="Search Script URL" />">
    <fieldset>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">
    Hidden field when in trial mode 
    <input type="hidden" name="SHOP" value="<Actinic:Variable Name="HiddenFields"/>" />
    </actinic:block>
    <input type="hidden" name="page" value="search" />
    <input type="text" name="SS" value="Quick Search" onfocus="this.value='';" class="quick-search-text" />
    <input type="hidden" name="PR" value="-1" />
    <input type="hidden" name="TB" value="O" />
    
    <input type="submit" name="ACTION" class="tld_search" value="Search">
    
    </fieldset>
    </form>
    </div>
    Code:
    /** SEARCH */
    /***OLD***/
    /*.quick-search {
    	clear: right;
    	float: right;
    	}
    .quick-search input {
    	border: 1px solid <actinic:variable name="Palette1" />;
    	}
    .quick-search-button {
    	height: 26px;
    	}
    .quick-search-button-wrapper input {
    	margin: 0;
    	border: none;
    	}*/
    .quick-search-text {
    	height: 20px;
    	font-size: <actinic:variable name="StandardFontSize" />;
    	}
    /***   ***/
    
    *html #quick-search {}
    #quick-search {
    clear:right;
    float:right;
    position: relative;
    width: 220px;
    height: 38px;
    background: #526A90;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    transition: all 3s;
    -moz-transition: all 3s;
    -webkit-transition: -webkit-transform 3s;
    -o-transition: all 3s;
    margin:5px 0;
    }
    h2.quick-search {color:#fff;}
    
    #quick-search form {
    	margin: 0px;
    	padding: 0px 0px 0px 0px;
    }
    #quick-search p {
    	margin: 0px;
    	padding: 5px 0px 0px 0px;
    }
    
    #quick-search fieldset {
    	margin: 0px;
    	padding: 0px;
    	border: none;
    }
    
    #quick-search input.quick-search-text {padding-top: 5px;margin-left:0;}
    #quick-search input.quick-search-text {
    line-height: 18px;
    border: 0;
    width: 120px;
    height: 18px;
    padding: 10px 50px 10px 10px;
    background-color: #CAD3E0;
    border-radius: 5px;
    -webkit-border-radius:5px;
    transition: all 3s;
    -moz-transition: all 3s;
    -webkit-transition: -webkit-transform 3s;
    -o-transition: all 3s;
    }
    
    #search-query {
    	width: 220px;
    	margin-top: 6px !important;
    	border: none;
    	background: #c0c0c0;
    }
    
    #search-submit {
    	width: 55px;
    	margin-left: 30px !important;
    	padding: 5px 0px 10px 0px;
    	border: none;
    	line-height: 1;
    	text-transform: lowercase;
    }
    input.tld_search {
    border: 0;
    height: 38px;
    width: 38px;
    text-indent: -999999px;
    background: transparent;
    background-image: url('icon_24x24_search.png');
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    cursor:pointer;
    top: 0;
    right: 0;
    }
    /********************************/
    The icon used is here --> (it's white!)

    At first it looked like the autosuggest was not working, it could not be seen.

    In the event, the autosuggest WAS there all along but it was displaced to the right of the screen. The actinicsearch.js script had appended an inline style of left: 1290px; which of course pushed it right off the screen.
    The difference between my design and the default serach box is that my search div is position:relative, so the position becomes 1290px to the right of the search box.
    The top position seems to be from the top of the page so SD is positioning the autosuggest relative to the whole page; EXCEPT: the default site is 970px SO SD must be calculating the position from the top left of the monitor display. I can't over ride the styles with an expression in the head of the page because they are inline so the only alternative is to edit actinicsearch.js thus:

    Line 246:
    var posX = findPosX(thisSearch);
    var posY = findPosY(thisSearch);

    I changed to:
    // var posX = findPosX(thisSearch);
    // var posY = findPosY(thisSearch);
    var posX = '0';
    var posY = '0';

    and the autosuggest is perfectly positioned below the search box.

    But I can't work out where SD is getting the PosX from. Moreover, there appears to be no instance of thisSearch in the default site.

    The fix works but it is annoying because it will need reapplying when the site is upgraded.

    This is just posted in case anyone else has this issue or in case you fancy a nice search box to which you are, of course, welcome!

    Thanks
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    #2
    Of course this will now apply to all search boxes on the site so the search box in search and in search results needs a <span style="position:relative;"> </span> wrapping the search input box in these other search codes.
    That's the one that contains in the code name="SS" size="40"
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    Comment


      #3
      The search script appljes inline styles whi h take priority over head styles. Could try ! Important though?
      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment


        #4
        It would be preferable to code without CSS position styles. Add float left on input and float right on the button, reduce width of input and it fits.
        Peblaco

        Comment


          #5
          That's a lovely bit of styling Louise, thank you.

          The problem, however, wasn't the search box so much as the responsive framework I use:
          www.getskeleton.com where the container has a position:relative out of the box.

          Thus SD thinks it is positioning from the top left of the display but it is actually positioning from top left of the container.

          Here are a couple of images to demonstrate:





          Thanks!
          Jonathan Chappell
          Website Designer
          SellerDeck Website Designer
          Actinic to SellerDeck upgrades
          Graphicz Limited - www.graphicz.co.uk

          Comment


            #6
            Hi,

            I had this issue with a couple of responsive sites, I found that "position:static;" did the job in the css:

            So your outer #quicksearch div would have position:static; (you will need to re-position it with a margin perhaps) with the main div being static it seemed to then leave the autosuggest in the correct position under the search box without having to edit anything else, that way upgrades etc are never affected.
            Many Thanks
            Lee
            www.mdnsupplies.co.uk
            www.hookandloopfasteners.co.uk

            Comment


              #7
              Thanks Lee Sorted me out again six years later!
              Jonathan Chappell
              Website Designer
              SellerDeck Website Designer
              Actinic to SellerDeck upgrades
              Graphicz Limited - www.graphicz.co.uk

              Comment


                #8
                I've turbo charged that search box. It displays a drop down list of matching products (plus icons) as you type. You can go straight to a product from the list. Configurable demo on http://www.drillpine.biz/v18-autocompletesearchv1/ (it's set to wait for at least 2 characters before it operates).
                Norman - www.drillpine.biz
                Edinburgh, U K / Bitez, Turkey

                Comment


                  #9
                  Norman,

                  I really like that. It's brilliant. One thing I noticed is that if I backspace the search box entry it puts 'Product Name' in the box when it gets to zero characters which mucks up my new text entry.

                  e.g. If I enter 'go' for gold and then back delete two spaces and start typing 'ri' for rings then I find I'm looking at 'Product Nameri' in the search box which isn't what what I'd want as a user.
                  -----------------------------------------

                  First Tackle - Fly Fishing and Game Angling

                  -----------------------------------------

                  Comment


                    #10
                    That was annoying me too. Fixed it now by adding a setting that lets you either clear the field or continue typing when there is a failed match.
                    Norman - www.drillpine.biz
                    Edinburgh, U K / Bitez, Turkey

                    Comment

                    Working...
                    X