Как с помощью jQuery при клике на ссылку выделить input?

Question

[Роман Павлов]

Вступление не особо важно, в конце коротко написано

Есть структура

<div class="search">
	<input type="text" name="search" class="search_field">
	<a class="search_but"></a>
</div>

И есть код

$(document).ready(function() {
    $('.search_but').click(function(){
        $('.search').toggleClass('search_w', 500, 'easeInQuad');
    });
});

Работает так:
При загрузке страницы есть простая кнопка .search_but
При клике на нее, div.search становится шире (присваивается класс), и появляется инпут. Сделано это с помощью CSS

.search_w .search_field {
  height: 27px;
  margin-left: 6px;
  width: 149px;
  border:none;
  outline: none;
  background: transparent;
  color: #444649;
}

.search_field {
  width: 0px;
  border:none;
  outline: none;
  background: transparent;
  float: left;
  color: transparent;
}

Это все прекрасно работает. Задача в том, что бы при клике на кнопку (а соответственно и при появлении инпута) он получал фокус, то есть в нем можно было сразу набирать текст без надобности тыкать в него.

Как уже можно догадаться, подключен jQuery UI ;)

Думал, что можно так:
$('.search_field').select();Но выделяется текст, а не инпут (хотя это не критично, как по мне) и к тому же при повторном нажатии (то есть скрывании инпута) текст снова выделяется.

Кто не читал:Как, с помощью jQuery UI выделить инпут при клике на кнопку?

Есть какие то предложения? =)

Answer 1

[Grag]

Ссылку на <label> смени и все. И там пропиши атрибут for="Имя инпута"

Comments

[Роман Павлов]

А других вариантов нет? :(

[Роман Павлов]

К тому же ваш способ не работает =\

[Роман Павлов]

Простите, упустил ошибку :) Да, работает, спасибо =)

[Юрий Лобанов]

@JaneHolland посмотрите мой вариант, если не устраивает label

Answer 2

[Юрий Лобанов]

$('.search_field').focus();
codepen.io/iiil/pen/FLHia

Comments

[Роман Павлов]

Спасибо, выберу этот вариант :)