Thread: Default Search Text

Hello,

I was wondering how I would go about adding default search text to the search box... Something like, "search our catalog..." And when they click in the search box, that text disappears and they can start typing.

Cheers,

~D

Here's one way :-

http://www.dailycoding.com/Posts/def...ery_trick.aspx


TTFN

BFG

Originally Posted by BFG 9000

Here's one way :-

http://www.dailycoding.com/Posts/def...ery_trick.aspx


TTFN

BFG

For some reason, this is not working... :-/

Does anyone else have any ideas please?

Well the example I gave clearly does work - there's a demo right on the page.
Can you be more specific about why it's not working for you?

Can you give me a url to where you've implemented it?
(I normally create a new topic for testing this kind of thing).
Here's a topic I created to test it : http://www.3mselect.co.uk/t-donato.aspx (use password donato)
I copied & pasted the code exactly as they give it on the page I linked to earlier.


Here's the exact contents of the topic :-

C#/VB.NET Code:

<style media="screen" type="text/css">
    .defaultText { width: 300px; }
    .defaultTextActive { color: #a1a1a1; font-style: italic; }
</style>
<script language="javascript">
<!--
$(document).ready(function()
{
    $(".defaultText").focus(function(srcc)
    {
        if ($(this).val() == $(this)[0].title)
        {
            $(this).removeClass("defaultTextActive");
            $(this).val("");
        }
    });
    
    $(".defaultText").blur(function()
    {
        if ($(this).val() == "")
        {
            $(this).addClass("defaultTextActive");
            $(this).val($(this)[0].title);
        }
    });
    
    $(".defaultText").blur();        
});
//-->
</script>
<input class="defaultText" title="e.g. someone@example.com" type="text"> 


Note that I didn't add the following code as I already call jquery in the template :-

C#/VB.NET Code:

<script src="//code.jquery.com/jquery-1.8.3.min.js" type="text/javascript">/script> 


TTFN

BFG

I want to use this for the default search box though in the aspdotnetstorefront...

I would like to send you the URL... Do have an email I can send it to?

Donato,

Did you make sure to download and install JQuery? You won't be able to just add the code to your template, you'll also have to download the jquery file and put it in your jscripts folder (or wherever else you want) and reference that file in the script src tag.

(Or you could do as BFG does and pull the jquery file from a remote site)

Originally Posted by donttryathome

Donato,

Did you make sure to download and install JQuery? You won't be able to just add the code to your template, you'll also have to download the jquery file and put it in your jscripts folder (or wherever else you want) and reference that file in the script src tag.

(Or you could do as BFG does and pull the jquery file from a remote site)

Yes. I have it in there:

<script type="text/javascript" src="../../jscripts/jquery-1.8.2.min.js"></script>

Try referencing the jquery library without the full relative path:

Code:

<script type="text/javascript" src="jscripts/jquery-1.8.2.min.js"></script>

Just had a look at the site link you emailed me.

I can't see any of the code above (except a call to jquery) in the source of the page.

The javascript relies on it (the search box) having a class of defaultText and a title of whatever you want the default text to be.


TTFN

BFG

Originally Posted by BFG 9000

Just had a look at the site link you emailed me.

I can't see any of the code above (except a call to jquery) in the source of the page.

The javascript relies on it (the search box) having a class of defaultText and a title of whatever you want the default text to be.


TTFN

BFG

I have this in there right before the </head> tag:

Code:

<script language="javascript">
<!--
    $(document).ready(function() {
        $(".search").focus(function(srcc) {
            if ($(this).val() == $(this)[0].title) {
                $(this).removeClass("searchTextActive");
                $(this).val("");
            }
        });

        $(".search").blur(function() {
            if ($(this).val() == "") {
                $(this).addClass("searchTextActive");
                $(this).val($(this)[0].title);
            }
        });

        $(".search").blur();
    });
//-->
</script>

I just changed the style names...

And now I have Google's JQuery library referenced:

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Your search text <input> field doesn't have the class or the title attributes.

C#/VB.NET Code:

<input name="ctl00$ctrlSearch$SearchText" type="text" id="ctl00_ctrlSearch_SearchText"> 


Instead, they're on a <span> which is the parent of a <div> which is a parent of the <input>.



TTFN

BFG

Originally Posted by BFG 9000

Your search text <input> field doesn't have the class or the title attributes.

C#/VB.NET Code:

<input name="ctl00$ctrlSearch$SearchText" type="text" id="ctl00_ctrlSearch_SearchText"> 


Instead, they're on a <span> which is the parent of a <div> which is a parent of the <input>.



TTFN

BFG

In the homepage.master, the search box is an aspdotnetstorefront control:

Code:

            <div style="float: right">
                        <aspdnsf:Search ID="ctrlSearch" runat="server" CssClass="search" SearchButtonCaption="Go"
                SearchCaption="<%$ Tokens: StringResource, common.cs.82 %>" SearchTextMinLength="<%$ Tokens:AppConfigUSInt, MinSearchStringLength %>"
                SearchTextMinLengthInvalidErrorMessage="<%$ Tokens: StringResource, search.aspx.2 %>"
                ValidateInputLength="true" ShowValidationMessageBox="true" ShowValidationSummary="false" Title="search our catalog..." />
                <a runat="server" class="account" href="~/account.aspx"><%--My Account--%></a></div>

Here's a really nice guide to creating a custom search control written by mbertulli.


TTFN

BFG

Originally Posted by BFG 9000

Here's a really nice guide to creating a custom search control written by mbertulli.


TTFN

BFG

Thank you. But I cannot get this to work either...

Erm... could you hard code it into homepage.master instead of using a control?

Clutching at straws a little now...



TTFN

BFG

Originally Posted by BFG 9000

Erm... could you hard code it into homepage.master instead of using a control?

Clutching at straws a little now...



TTFN

BFG

I am not sure how to implement the search WITHOUT a control...