Saturday, November 11. 2006

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.
If you enjoyed this post, make sure you subscribe to my RSS feed.
Posted by Carl in Theming Serendipity at 08:37   Comments (2)

Trackbacks
Trackback specific URI for this entry

No Trackbacks

Comments

  1. -stm said,

    Saturday, November 11. 2006 at 11:59 (Reply)

    great work, as allways :-)

    But one little suggestion:

    onFocus=" and onBlur=" is not xhtml-valid: it must be lowercase

  2. carl said,

    Saturday, November 11. 2006 at 12:07 (Reply)

    Brilliant!

    I've been wanting to fix that but haven't had the time to research it properly. Thank you. I'll edit the code above.

Add Comment

Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA