Javascript Ajax通过.js使用模型数据填充搜索结果

我是JS世界的新手，需要帮助使用AJAX从我的模型数据填充搜索结果。本质上，当用户在搜索表单中键入某些内容时，数据会通过“title\u istart\u with”异步过滤，并提供正确的选项。我在如何使用HTML设置在search-results.js上的正确语法动态填充数据方面遇到了问题

这是my home.html：

<div class="app-table">
    <div class="row">
        {% for pilot in pilots %}
        <div class="col-lg-4">
            {% if pilot.poster %}
                <img class="thumbnail" src="{{ pilot.poster.url }}">
            {% endif %}
            <div class="box-element product">
                <p>{{pilot.title}}</p>
                <p>Page Count: {{pilot.count}}</p>
                <p>Creator: {{ pilot.writer }}</p>
                {% if pilot.script %}
                <a href="{{ pilot.script.url }}" target="_blank">Read Me</a>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

{pilots%中的pilot%为%s}
{%if pilot.poster%}
{%endif%}
{{pilot.title}

页面计数：{pilot.Count}

创建者：{{pilot.writer}

{%if pilot.script%}
{%endif%}
{%endfor%}

这是my search_results.js：

const sbody=document.querySelector（“.search body”）

if（data.length==0）{

searchOutput.innerHTML=“对不起，伙计。脚本还没有捐赠！”；
}否则{
data.forEach（项=>{
sbody.innerHTML+='
${pilot.title}

${pilot.count}

${pilot.writer}

';              
})
}

。。。 我也不知道填充img和URL标记的正确语法

                searchOutput.innerHTML = "Sorry, mate. Script hasn't been donated yet!";
            }else{

                data.forEach(item=>{
                    sbody.innerHTML += '
                        <div>
                        <p>${pilot.title}</p>
                        <p>${pilot.count}</p>
                        <p>${pilot.writer}</p>
                        </div>';              
                })
            }