Internal search with HTML

Question

Good night people! I’m creating a movie site and I wanted to know how to do an internal search system on it, like, everything is already created, the input and the button, now just have to make it work! I want that at the same time I type in the bar, it suggests some titles and when clicking redirect to a specific page. I’m a beginner in all of this, I know little about programming in general, and I need help! I thought about creating an HTML page with a "list" of movies, and this list would be used in the suggestions. Thank you :)

Answer 1

Usually such an application has a very well defined database structure, with relationships between tables, if necessary, and a server-side programming language controlling everything. If your application hasn’t shown a need for it all, okay, but making things dynamic on a static content site is hard work and doesn’t always produce satisfactory results. That said, I recommend you to study a programming language and database. The combination PHP + Mysql is very receptive to beginners.

Only with Javascript is it possible to create something, but as I said, the result is not always so satisfactory. Given that your entire site has been built into static files, directly into HTML, I believe that the amount of content should be small - if not, you should learn the programming language urgently. And since you just want to do a search and redirect, you can store the data of all the movies in a structure in Javascript and use it in searches.

Let’s assume there are three movies, then you could do something like:

const movies = [
  {title: "Alice no País das Maravilhas", url: "alice.html"},
  {title: "Harry Potter e a Pedra Filosofal", url: "harry.html"},
  {title: "Karate Kid", url: "karate.html"}
];

Whenever a new movie is added to the site, this structure should be updated manually. So, by typing something into the search field, you could perform a search Fuzzy in the titles of the films returning the related titles.

const movies = [{
    title: "Alice no País das Maravilhas",
    url: "alice.html"
  },
  {
    title: "Harry Potter e a Pedra Filosofal",
    url: "harry.html"
  },
  {
    title: "Karate Kid",
    url: "karate.html"
  }
];

// Estes elementos servirão para a manipulação do DOM: elementos HTML
const title = document.getElementById("title");
const list = document.getElementById("movies");

// Aqui atribuímos uma função ao evento `keyup` do campo no HTML
// Isto é, sempre que uma tecla for pressionada, a função será executada:
title.addEventListener("keyup", function(event) {

  // Filtramos a lista de filmes com base no texto digitado:
  const matchs = movies.filter(value => {

    // Se o texto digitado for encontrado no título, retorna o registro:
    return value.title.indexOf(this.value) !== -1;

  });
   
  // Exibe no HTML a lista de filmes do resultado do filtro anterior:
  list.innerHTML = "";
  for (let movie of matchs) {
    list.innerHTML += "<li><a href='"+movie.url+"'>"+movie.title+"</a></li>";
  }
});

<input type="text" id="title" placeholder="Digite o título do filme">

<ul id="movies"></ul>

Note that when you start typing a title in the field a list of suggestions with the links to each movie is created right below. If this result is already satisfactory for you, you can already conclude that you need to study Javascript.