Serendipity QuickSearch form revisited

quicksearch with livesearchIn a previous entry I demonstrated how to add a quicksearch form to any Serendipity template, and we added a ‘Go’ Button to make the form look more attractive. In this entry I’m going to create a quicksearch form that includes an image for the button instead of text, and we’re going to update the form to be compatible with the LiveSearch plugin.

To begin, we need to add the html form to our template.

<form method="get" id="searchform" action="{$serendipityBaseURL}">
<input type="text" id="serendipityQuickSearchTermField" name="serendipity[searchTerm]" size="15"
value="{$CONST.QUICKSEARCH}..." onfocus="if(this.value=='{$CONST.QUICKSEARCH}...')value=''" onblur="if(this.value=='')value='{$CONST.QUICKSEARCH}...';" />
<input type="hidden" name="serendipity[action]" value="search" />
<input id="submit" type="submit" name="submit" value=" " />
</form>
<div id="LSResult" style="display: none;"><div id="LSShadow"></div></div>
<script type="text/javascript">lsbase = "{$serendipityBaseURL}plugin/ls?";
waittext = "Wait, sending request...";
addLoadEvent(liveSearchInit);
</script>

This code doesn’t actually include a reference to the image for our search button, we’re going to add that to our stylesheet as a background image for the input id #submit. Notice that the value attribute for the submit button is blank, this simply prevents any text from displaying over the top of the button. I chose to use this technique instead of an actual button tag because I plan to continue to develop the search form snippet.

Also, be aware of one issue with this form, it includes the javascript onFocus and onBlur so that if a user clicks into the form the ‘Quicksearch…’ text is removed, and if they click back out, the ‘Quicksearch…’ text returns. This conflicts with the LiveSearch plugin.

What happens is that if the user enters a search query the LiveSearch plugin is activated and displays the list of matching entries. If the user chooses not to click any of the search results, the ‘Quicksearch…’ text will not return, this is beacuse the LiveSearch plugin code is still in control of the input box and I haven’t found any way of getting the LiveSearch javascript to return control to the inline javascript. I’m definitely not a javascript expert. In fact the LiveSearch plugin doesn’t release the input box in under normal use so this problem doesn’t only affect my snippet, it affects all LiveSearch queries, even those on some other Blog engines. To make a our form look good we have to add something to our stylesheet, this is the #submit id which displays the image we want to use for our form;

#submit {background: transparent url({TEMPLATE_PATH}img/go.gif) center center no-repeat;
border: 0px;
height:18px;
width:18px;
border: 0px;
padding: 0px;
overflow: hidden; }

Nothing about this css should be confusing, but I’m going to walk you through it anyway. As you can see we’ve added a background, and for the sake of easy use I chose transparent for the color, and then added the name of the image to be used. You can change this to whatever image name you want. After that I’ve positioned the image so that itis centered when viewed against the input box.

I also added a height and width for the the #submit, this corresponds with the dimensions of the image and allows me to position it where I want to. You should experiment with these to correctly place your own image.

Now we need to add the LiveSearch styles to our stylesheet. I chose a basic green background for my search results box, and here is the css

#LSShadow {border-right: 2px solid #111;
border-bottom: 2px solid #111;}
.serendipity_livesearch_result {border: 1px solid #111;
padding: 2px;
color:#fff;
background-color: #197004; }
.serendipity_livesearch_result a{color:#fff;}

Hope you have fun playing with this.

Comments are closed.