Как с помощью jquery получить данные из input и подставив их в get параметры перенаправить на другой url

Question

У меня есть форма поиска с выпадающим списком. Т.е. пользователь вводит в поле свой запрос и в выпадающем списке выбирает где искать его запрос. Моя форма:

<section class="container-search">
    <form class="search-new" action="" >
        <input id ="my-search" class="new-search" type="search" name="query" placeholder="Поиск" autocomplete="off"  required/>
        <ul class="search-ac">
        <li><a class="country" id="ru" href="/ru/search"><img src="/app/site/assets/img/russia.png" alt="Россия">Россия</a></li>
        <li><a class="country" id="ua" href="/ua/search"><img src="/app/site/assets/img/ukraine.png" alt="Украина">Украина</a></li>
        <li><a class="country" id="kz" href="/kz/search"><img src="/app/site/assets/img/kazakhstan.png" alt="Казахстан">Казахстан</a></li>
        </ul>
    </form>
</section>

Допустим пользователь решил поискать "береза" в России. По тегу a пользователь переходит по ссылке /ru/search, а мне нужно, чтобы он переходил по ссылке /ru/search?query=береза. Для этого я написала скрипт.

 $(document).ready(function() {
            /*Получаю id страны при собитии click*/
            function cnt() {
                $('a.country').click(function() {
                    var country = $(this).attr('id');
                    return country;
                });
            }
            // результат функции записываю в переменную
            var c = cnt();
            //получаю результат ввода в input
            function vln() {
                $("input#my-search").keyup(function() {
                    var value = $(this).val();
                }).keyup();
                return value;
            }
            // результат функции записываю в переменную
            var v = vln();
            //формирую новые url
            var url = "http://dev.com/" + c + "?query=" + v;
            //Переопределяю href для ссылки
            $("a.country").attr("href", url);
        });

Но к решению задачи не продвинулась. Помогите, пожалуйста, советом, комментарий, примером. То, что я совсем новичoк в js, думаю очевидно. Заранее спасибо!

Answer 1

$(document).ready(function() {

  $("input#my-search").keyup(function() {
    var value = $(this).val();
    $("a.country").each(function(){
      if (!$(this).data("oldhref"))
        $(this).data("oldhref", $(this).attr("href"));
      var url = "http://dev.com" + $(this).data("oldhref") + "?query=" + value;
      $(this).attr("href", url);
    });  
  });
  
  // remove this block
  $("a.country").click(function(e) {
    e.preventDefault();
    console.log(this.href);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container-search">
  <form class="search-new" action="">
    <input id="my-search" class="new-search" type="search" name="query" placeholder="Поиск" autocomplete="off" required/>
    <ul class="search-ac">
      <li>
        <a class="country" id="ru" href="/ru/search"><img src="/app/site/assets/img/russia.png" alt="Россия">Россия</a>
      </li>
      <li>
        <a class="country" id="ua" href="/ua/search"><img src="/app/site/assets/img/ukraine.png" alt="Украина">Украина</a>
      </li>
      <li>
        <a class="country" id="kz" href="/kz/search"><img src="/app/site/assets/img/kazakhstan.png" alt="Казахстан">Казахстан</a>
      </li>
    </ul>
  </form>
</section>

БЛОГ НА HUSL

Как с помощью jquery получить данные из input и подставив их в get параметры перенаправить на другой url

Ответы (1 шт):