Как кликнув по тексту добавить этот текст в поле поиска?

275

26 сентября 2017, 06:56

Есть следующая конструкция:

.word span { 
border-bottom:1px dotted #006fff;  
font-size:14px; 
color:#006fff; 
margin:0px 5px; 
cursor:pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="form"> 
  <input type="text" class="megasearch" size="40" placeholder="Текст для поиска..." > 
  <button>Искать</button> 
</div> 
<p class="word"> 
 Например:  <span>Холодильник Bosch</span>  <span>Печь Indesit</span> 
</p>

Требуется после клика по любому из span в блоке с классом .word найти на странице поле с классом .megasearch и вставить текст из span в это поле.

Подскажите, как это оформит в виде скрипта?

Answer 1

.word span { 
border-bottom:1px dotted #006fff;  
font-size:14px; 
color:#006fff; 
margin:0px 5px; 
cursor:pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="form"> 
  <input type="text" class="megasearch" size="40" placeholder="Текст для поиска..." > 
  <button>Искать</button> 
</div> 
<p class="word"> 
 Например:  <span>Холодильник Bosch</span>  <span>Печь Indesit</span> 
</p>

$('.word span').on('click', function() { 
  $('#search').val($(this).text()); 
});

.word span { 
  border-bottom: 1px dotted #006fff; 
  font-size: 14px; 
  color: #006fff; 
  margin: 0px 5px; 
  cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="form"> 
  <input type="text" class="megasearch" size="40" placeholder="Текст для поиска..." id="search"> 
  <button>Искать</button> 
</div> 
<p class="word"> 
  Например: <span>Холодильник Bosch</span> <span>Печь Indesit</span> 
</p>