Как изменить значение, имя и заполнитель входного тега при щелчке по тегу привязки с использованием Javascript?

Question

<div class="filter_search">
      <button class="fas fa-filter circle-icon"></button>
      <ul>
        <li><a href="#">Events</a></li>
        <li><a href="#">Users</a></li>
      </ul>
  </div>

Приведенный выше код открывает раскрывающееся меню. Когда я нажимаю на «Пользователи», я хочу изменить значение заполнителя следующего входного тега на «Поиск пользователей» и «Поиск событий» при нажатии на «События». Также я хочу изменить имя и значение.

Форма ввода:

<form method="GET">
         <input id="searchBar" class="form-control" type="text" placeholder="Search Events" name="q_posts" value="{{ request.GET.q_posts }}">
         <input type="submit" value="Search">
     </form>

CSS для открытия раскрывающегося меню:

.filter_search ul{
    position: absolute;
    color: #FFFFFF;
    background: #FFFFFF;
    box-shadow: 4px 4px 20px rgba(26, 60, 68, 0.09);
    border-radius: 10px;
    margin-top: 2px;
    padding: 6px; 
    width: 120px;
    height: 65px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transition: .1s ease;
    transform: translateY(10px); 
}
.filter_search button:focus + ul{
    opacity: 1;
    pointer-events: all;
}
 

Это возможно ли это сделать?

Answer 1

$(".link-list a").click(function(){
  linkTxt = $(this).text();
  $("#searchBar").attr("placeholder","Search "+linkTxt).attr("name",linkTxt);
  // to change value uncomment below
  // $("#searchBar")..attr("value",linkTxt);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter_search">
      <button class="fas fa-filter circle-icon"></button>
      <ul class="link-list">
        <li><a href="#">Events</a></li>
        <li><a href="#">Users</a></li>
      </ul>
  </div>
   <form method="GET">
     <input id="searchBar" class="form-control" type="text" placeholder="Search Events" name="q_posts" value="">
     <input type="submit" value="Search">
 </form>

Пожалуйста, используйте это.