Показывать иконку когда input в фокусе
 

Доброе утро! помогите пожалуйста скорректировать код. Когда поле в фокусе, то показываем иконку и отчищаем введенный текст. когда не в фокусе то убираем. Я написала код, он показывает и убирает иконку, но не очищает текст. Хотя событие на очистку поля стоит.

Идеально сделать бы как в поиске Яндекс. когда ввели текст, то появляется кнопка очистить

<input id="searchDeliverySector" name="searchDeliverySector" type="text" class="form-control" maxlength="500">
            <span class="btn-clear" onclick="ClearSearchFields(['searchDeliverySector']); searchDepartments();" style="display: none;">
                <img src="/Content/Images/icon-clear.png" alt="">
            </span>

$(document).ready(function () {
        $('#searchDeliverySector').focus(function () {
            $('span.btn-clear').show();
        });

        $('#searchDeliverySector').blur(function () {
            $('span.btn-clear').hide();
        });
    });

см скрин

Помогите пожалуйста!

.val() В помощь.

HTML:

<span class="btn-clear" onclick="ClearSearchFields('#searchDeliverySector'); searchDepartments();" style="display: none;">

JS:

function ClearSearchFields(id) {
    $(id).val('');
}

Название конечно функции странное ClearSearchFields как будто для очистки всей формы. Есть ещё <button type="reset">Reset</button>.

Алексей Петрович, увы, но не помогло =( он не успевает очистить, так как скрывается

function ClearSearchFields(searchDeliverySector) {
	    $('#searchDeliverySector').focus(function () {
	        $('span.btn-clear').show();
	        $('#searchDeliverySector').val('');
	    });

	    $('#searchDeliverySector').blur(function () {
	        $('span.btn-clear').hide();
	    });
	}

правильно написала?

А если убрать:

$('#searchDeliverySector').blur(function () {
     $('span.btn-clear').hide();
});

Добавить:

function ClearSearchFields(id) {
    $(id).val('');
    $(this).hide();
}