Javascript 如何在Django Python中使用Fetch Ajax方法进行实时搜索？

当我这样做时，我得到的Post.match不是一个函数错误：（请帮助，我是JavaScript部分的新手。（我得到的是一个对象，因此必须将其转换为数组，但在使用Objects.values方法后仍然得到此错误）

My Views.py文件：

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from .models import Post

def Data(request):
    items = Post.objects.all()

    data = []

    for qs in items:

        I = {"title":qs.title,
             "content": qs.content,
             "image": qs.image.url,
            }
        data.append(I)

    return JsonResponse({"data":data})

{% extends 'blog/base.html' %}

{% load static %}

{% block content %}

<div class = 'w-100 text-center'>

<h1>Search Results</h1>


<form id = "search-form" autocomplete="off">
    {% csrf_token %}
  <input name = 'game' type="text" id = "search-input" placeholder= "Post Search..">
</form>

<div id = "results-box" class = "results-card"> 
</div> 

</div>

{% endblock content %}


{% block js %}

<script defer src="{% static 'blog/S1.js' %}"> </script>

{% endblock js %}

console.log('Heelowwww')


const url = window.location.href

const searchForm = document.getElementById("search-form")
const searchInput = document.getElementById("search-input")
const resultsBox = document.getElementById("results-box")


const csrf = document.getElementsByName("csrfmiddlewaretoken")[0].value




options = {method: "GET",
           headers: {
            Accept: "application/json"
           },
           data:{
            'csrfmiddlewaretoken': csrf,
           }
}



const SearchPosts = async SearchIt => {
const res = await fetch("http://localhost:8000/data/",options)
const Posts = await res.json()

S = Object.values(Posts["data"])

let matches = S.filter(post =>{
    const regex = new RegExp(`^${SearchIt}`, 'gi')
    return post.match(regex)
})
    console.log(matches)

}

 
searchInput.addEventListener('input', () => SearchPosts(searchInput.value))

我的HTML文件：

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from .models import Post

def Data(request):
    items = Post.objects.all()

    data = []

    for qs in items:

        I = {"title":qs.title,
             "content": qs.content,
             "image": qs.image.url,
            }
        data.append(I)

    return JsonResponse({"data":data})

{% extends 'blog/base.html' %}

{% load static %}

{% block content %}

<div class = 'w-100 text-center'>

<h1>Search Results</h1>


<form id = "search-form" autocomplete="off">
    {% csrf_token %}
  <input name = 'game' type="text" id = "search-input" placeholder= "Post Search..">
</form>

<div id = "results-box" class = "results-card"> 
</div> 

</div>

{% endblock content %}


{% block js %}

<script defer src="{% static 'blog/S1.js' %}"> </script>

{% endblock js %}

console.log('Heelowwww')


const url = window.location.href

const searchForm = document.getElementById("search-form")
const searchInput = document.getElementById("search-input")
const resultsBox = document.getElementById("results-box")


const csrf = document.getElementsByName("csrfmiddlewaretoken")[0].value




options = {method: "GET",
           headers: {
            Accept: "application/json"
           },
           data:{
            'csrfmiddlewaretoken': csrf,
           }
}



const SearchPosts = async SearchIt => {
const res = await fetch("http://localhost:8000/data/",options)
const Posts = await res.json()

S = Object.values(Posts["data"])

let matches = S.filter(post =>{
    const regex = new RegExp(`^${SearchIt}`, 'gi')
    return post.match(regex)
})
    console.log(matches)

}

 
searchInput.addEventListener('input', () => SearchPosts(searchInput.value))

我的数据Json页面：

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from .models import Post

def Data(request):
    items = Post.objects.all()

    data = []

    for qs in items:

        I = {"title":qs.title,
             "content": qs.content,
             "image": qs.image.url,
            }
        data.append(I)

    return JsonResponse({"data":data})

{% extends 'blog/base.html' %}

{% load static %}

{% block content %}

<div class = 'w-100 text-center'>

<h1>Search Results</h1>


<form id = "search-form" autocomplete="off">
    {% csrf_token %}
  <input name = 'game' type="text" id = "search-input" placeholder= "Post Search..">
</form>

<div id = "results-box" class = "results-card"> 
</div> 

</div>

{% endblock content %}


{% block js %}

<script defer src="{% static 'blog/S1.js' %}"> </script>

{% endblock js %}

console.log('Heelowwww')


const url = window.location.href

const searchForm = document.getElementById("search-form")
const searchInput = document.getElementById("search-input")
const resultsBox = document.getElementById("results-box")


const csrf = document.getElementsByName("csrfmiddlewaretoken")[0].value




options = {method: "GET",
           headers: {
            Accept: "application/json"
           },
           data:{
            'csrfmiddlewaretoken': csrf,
           }
}



const SearchPosts = async SearchIt => {
const res = await fetch("http://localhost:8000/data/",options)
const Posts = await res.json()

S = Object.values(Posts["data"])

let matches = S.filter(post =>{
    const regex = new RegExp(`^${SearchIt}`, 'gi')
    return post.match(regex)
})
    console.log(matches)

}

 
searchInput.addEventListener('input', () => SearchPosts(searchInput.value))