Search autosuggest position in custom page designs

[graphicz]

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:

<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>

/** 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

[graphicz]

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"

[graphicz]

The search script appljes inline styles whi h take priority over head styles. Could try ! Important though?

[peblaco]

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.

[graphicz]

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!

[MDN]

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.

[graphicz]

Thanks Lee Sorted me out again six years later!

[NormanRouxel]

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).

[Mike Hughes]

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.

[NormanRouxel]

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.