присвоение класса активной ссылки для результата поиска

Всем привет. Дописываю сайт на django + htmx + jquery. Есть меню категорий услуг и присвоение класса .active_child для активной ссылки этого меню реализовано следующим образом:

$(".root").on("click", "a", function(ev) {
    ev.preventDefault();
    $("a.active_child", ev.delegateTarget).not(this).removeClass("active_child");
    $(this).toggleClass("active_child");
});

Все работает, но над этим же меню есть input для поиска услуг (с автозаполнением). То есть посетитель сайта сможет искать услуги либо кликая на категорию услуг, либо через поиск с автозаполнением.

Проблема в том, что после того, как найдешь услугу через поиск и выведешь ее, класс .active_child остается у той категории, на которую я кликал в последний раз. А мне нужно, чтобы присвоение .active_child класса изменялось также в соответствии услуги, которую нашел через поиск.

<!-- Поиск и список категорий -->
<div class="services__search">
            <form action="{% url 'services:services_search' %}" hx-get="{% url 'services:services_search' %}" hx-target="#here" method="get">
                {% csrf_token %}
                <input type="text" id="search" placeholder="поиск по услугам" name="term">
                <button type="submit">найти</button>
            </form>
        </div>
        <div class="services__categories-list">
            <p>Выберите интересующий вас пункт или используйте поиск по услугам. Не знаете с чего начать? Кликните на пункт Консультирование и запишитесь на прием к нужному врачу.</p>
            {% full_tree_for_model services.Category as categories %}
            <ul class="root"> 
                {% recursetree categories %}
                    <li>
                        {% if node.is_root_node %}
                            <h4>&#10059; {{ node.name }}</h4>
                            {% elif node.is_child_node %}
                                <p>
                                    <a class="child-category" href="{{ node.get_absolute_url }}" hx-get="{{ node.get_absolute_url }}" hx-trigger="click" hx-target="#here" , data-hx-boost="true">{{ node.name }}</a>
                                </p>
                            {% endif %} 
                            {% if not node.is_child_node %}
                                <ul class="children"> {{ children }} </ul> 
                            {% endif %}
                    </li> 
                {% endrecursetree %}
            </ul>
        </div>
        <!-- Autocomplete -->
        <script>
            $(function() {
                $("#search").autocomplete({
                    source: "{% url 'services:service_autocomplete' %}",
                    minLength: 2,
                });
            });
        </script>

введите сюда описание изображения введите сюда описание изображения


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