I have some code here in JS and I can't figure out why it isn't doing what I want it to do. Basically, I have a search bar that should write "Search..." it in. When the user clicks on it, the text goes away and the bar goes blank. If the user clicks away without filling any text in, the "Search..." text returns.

Otherwise, the text the user enters stays in the bar. Up until this point my code works fine. The issue is this; when the user inputs something AND THEN takes it away, the bar remains blank, whereas the "Search..." text should return. (Notice: This does not occur if the user simply clicks on the bar and then clicks away; the default text returns as it should. It only happens if the users enters something and then takes it away.)

I can not figure out why this is happening. Any help would be greatly appreciated. Here is my JS code:

```
$(document).ready(function () {
    var search_default = 'Search...';
    $('input[type="search"]').attr('value', search_default).focus(function () {
        if ($(this).val() == search_default) {
            $(this).attr('value', '');
        }
    }).blur(function () {
        if ($(this).val() == '') {
            $(this).attr('value', search_default);
        }
    });
});

```