How to implement live search using fetch method on my test website ?

[Firaki12345]

Hi so i am using python Django and using JavaScript with the help of fetch method but i am stuck can anyone please help :( My python views File:

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})

My Search_results HTML FILE:

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

{% load static %}

{% block content %}

Search Results

{% csrf\_token %}

{% endblock content %}

{% block js %}

{% endblock js %}

My JS FILE:

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,
// 'game':searchInput,
}
}

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

S = 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))

I get Filter is not a fucntion/method error i am getting back an object so how can i do this :( sorry a beginner in javascript

[Sean Ewington]

Thanks very much for using CodeProject. This is our forum for questions about posting articles. Please try posting this in our Quick Answers section: https://www.codeproject.com/Questions/ask.aspx[^]

Thanks, Sean Ewington CodeProject