JS added link

HTML

<main class="col-sm-8 col-md-8 col-lg-9 col-xl-10 ps-3">
  <h1>Выберите город</h1>

  <div class="row m-0">
    <div class="">
      <h4>Поиск по городам</h4>
      <input
        type="search"
        id="city_search_name"
        name="query"
        class="form-control"
        value=""
        placeholder="Начните вводить ваш город"
        autocomplete="off"
      />

      <div class="city-search-result" id="city_search_result"></div>
    </div>

    <div class="cities-list">
      <a
        href="moskva"
        class="searched_item cities-list-item btn btn-light btn-sm m-1 rounded-5"
        data-search="москва"
      >
        Москва
      </a>
      <a
        href="sankt-peterburg"
        class="searched_item cities-list-item btn btn-light btn-sm m-1 rounded-5"
        data-search="санкт-петербург"
      >
        Санкт-Петербург
      </a>
      <a
        href="novosibirsk"
        class="searched_item cities-list-item btn btn-light btn-sm m-1 rounded-5"
        data-search="новосибирск"
      >
        Новосибирск
      </a>
      <a
        href="abakan"
        class="searched_item cities-list-item btn btn-light btn-sm m-1 rounded-5"
        data-search="абакан"
      >
        Абакан
      </a>
      <a
        href="anadyr"
        class="searched_item cities-list-item btn btn-light btn-sm m-1 rounded-5"
        data-search="анадырь"
      >
        Анадырь
      </a>
      <a
        href="anapa"
        class="searched_item cities-list-item btn btn-light btn-sm m-1 rounded-5"
        data-search="анапа"
      >
        Анапа
      </a>
      <a
        href="angarsk"
        class="searched_item cities-list-item btn btn-light btn-sm m-1 rounded-5"
        data-search="ангарск"
      >
        Ангарск
      </a>
      <a
        href="arhangelsk"
        class="searched_item cities-list-item btn btn-light btn-sm m-1 rounded-5"
        data-search="архангельск"
      >
        Архангельск
      </a>
      <a
        href="astrahan"
       ...

CSS

main 
{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.row
{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.cities-list
{
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  
  gap: 10px;
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {

    let _city_search_result = document.getElementById('city_search_result');
    let _city_search_name = document.getElementById('city_search_name');
    _city_search_name.addEventListener('change', searchCity);
    _city_search_name.addEventListener('keyup', searchCity);

    function searchCity()
    {
      _city_search_result.innerHTML = '';

      let _search_query = this.value.toLowerCase();
      if(_search_query.length >= 2)
      {
        let _result = document.querySelectorAll('.cities-list .searched_item[data-search*="'+_search_query+'"]');

        _result.forEach(function(elem) {
          let _link = elem.href;
          let _text = elem.innerHTML;

          let _searchLink = '<a href="'+elem.href+'" class="btn btn-success btn-sm rounded-5 opacity-75 city m-1" >'+elem.innerHTML+'</a>';
          _city_search_result.innerHTML += _searchLink;
        });
      }

    }
  });