Как связать указанный c результат поиска имени пользователя из JSON с правильным URL-маршрутом? - PullRequest
Новая
       25

Как связать указанный c результат поиска имени пользователя из JSON с правильным URL-маршрутом?

0 голосов
/ 29 апреля 2020

Я создал поисковое приложение, которое отфильтровывает имена пользователей из JSON. Я не знаю, как подключить их к странице URL в шаблонах. Потому что каждый раз, когда я ищу какое-либо имя пользователя, оно выводит меня на одну и ту же страницу user_post.

JS

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');

// Search sates.json and filter it 
const searchStates = async searchText => {
    const res = await fetch('/json');
    const states = await res.json();
    console.log(states);

     // Get matches to current text input
    let matches = states.user.filter(state => {
        const regex = new RegExp(`^${searchText}`, 'gi');
        return state.username.match(regex);
    });

    if(searchText.length === 0) {
        matches = [];
        matchList.innerHTML = '';
    }
    console.log(matches);
    outputHtml(matches);
};

// Show results in HTML
const outputHtml = matches => {
    if(matches.length > 0) {
        const html = matches.map(
            match => `
            <div class="card card-body mb-1">
            <h4>${match.username}
            </div>`);

            matchList.innerHTML = html;

             console.log(html);
    }
}
search.addEventListener('input', () => searchStates(search.value));

HTML

<input  type="text" id="search" 
class="form-control form-control-lg"
placeholder=" Search...">

{% for post in posts.items %}
<a id="match-list" href="{{ url_for('users.user_posts', username=post.author.username) }}"  ></a>

{% endfor %}

{% endblock content %}
...