zorchenhimer / MoviePolls

Voting to decide on a movie to watch with MovieNight
https://discord.gg/F2VSgjJ
16 stars 6 forks source link

Add live search to the search engine. #105

Closed LukeIsCodingNet closed 3 years ago

LukeIsCodingNet commented 3 years ago

Add live search to the search engine that filters movies immediately when you start typing similar to Netflix.

CptPie commented 3 years ago

Similarly to #103 input checking before submission is only possible with javascript (atleast as far as i am aware) Also the feature you are talking about is called elastic search, which would as far as i am aware require 1 a working database (i.e. not json) and 2 importing and using a fucking massive js library.

dbaudisch commented 3 years ago

I have a rudimentary solution for this issue, written in vanilla JS. Basically filtering by title and hiding the ones not matching.

const voteEntries = Array.from(document.querySelectorAll('.voteRoot'))
document.querySelector('input').addEventListener('keyup', e => {
    voteEntries.forEach(item => item.style.display = item.querySelector('.voteName a').innerText.toLowerCase().includes(e.target.value.toLowerCase()) ? 'block' : 'none')
})

(code can be tested by posting it into the browser console)

@zorchenhimer @CptPie I provided a patch file for you to commit: moviepolls-issue-105.patch.txt

dbaudisch commented 3 years ago

@zorchenhimer @CptPie If you guys are fine with my proposal, feel free to commit it

CptPie commented 3 years ago

Its fine with me, how about you @zorchenhimer ?

CptPie commented 3 years ago

I've prepared a branch which implements the approach from @dbaudisch https://github.com/CptPie/MoviePolls/tree/105DynSearch

zorchenhimer commented 3 years ago

Yea, I'm ok with that.