How to display all the available results to a search query in HTML

I have this search engine in django that when you look for let’s say “release date” only displays one result with that date, but not all the available results with it. I was wondering how I can manage that, so that if I look for something that has more than one result, it will show all of them and not a random unique result.

This is the search function in my view:

def films(request):
   movies = []
   
   if request.method == 'POST':
       
       film_url = 'https://ghibliapi.herokuapp.com/films/'
       
       search_params = {
           'films' : 'title',
           'films' : 'description',
           'films' : 'director',
           'films' : 'release_date',
           'q' : request.POST['search']
           
           }

       
       r = requests.get(film_url, params=search_params)
       results = r.json()
       
       if len(results):
           for result in results:
               movie_data = {
               'Title' : result['title'],
               'Release_date': result['release_date'],
               'Director' : result['director'],
               'Producer' : result['producer'],
               'Description' : result['description']

           }

           movies.append(movie_data)  
       
    
       else:
           message = print('No results found')

   context = {
   'movies' : movies
   }
       

   return render(request,'core/films.html', context)

This is my html:

{% load static %}
<!DOCTYPE html>
<html>
<head>
   <title>Ghibli Studio | Movies</title>
   <link rel="stylesheet" href="{% static 'core/films.css' %}">
</head>
<body>
   <div class="layer">
       <div class=" header">

       </div>
       <div class="wrap">
           <form action='/films' method="POST">
               {% csrf_token %}
               <div class="search">


                   <input type="text" name="search" class="searchTerm" placeholder="     Type movie name">
                   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                   <button type="submit" class="searchButton">

                       <i class="fa fa-search" style="font-size:24px"></i>
                   </button>

               </div>


           </form>
       </div>

       {% if movies %}
       {% for movie in movies %}
       <div>
           <ul class="result">
               <style>
                   @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300&display=swap');
               </style>

               <h4>{{movie.Title}}</h4>
               <h5 style="color:lightslategray;">
                   Release date: {{movie.Release_date}} <br>
                   Director: {{movie.Director}}
                   <br>Producer: {{movie.Producer}}
                   <br>
                   <br>{{movie.Description}}
               </h5>


           </ul>
           {% endfor %}

           {% endif %}
       </div>
       
   </div>
</body>
</html>

Unless the indentation got messed up in the code block: The movies.append() happens after the for loop, not in it, so movies will only contain the movie_data for whichever result the iterator returns last. That’d explain why only one result is shown.

2 Likes

Oh, you are absolutely right, I put it inside and it worked! Thank you so much.

1 Like

Would you know how to display the results in different boxes? Because now that I did that, I get all the results on top of each other and I am not sure how to get them in different boxes in the html. I would appreciate it if you have any ideas.

Depends on what exactly you want, but in general probably wrap each result in a <div> with a CSS class that styles them as boxes. That said, I see a few issues in the HTML template that might cause issues:

Why the <ul> (“unordered list”) Element? I’d understand if you wanted to style the results as a bullet points list, but having a list without list items doesn’t make sense.

The style element belongs in the document header, see the MDN description.

Having main text in a header element is questionable, and so are explicit line breaks in most cases. I think paragraphs (possibly with a class for style) or a table would work better.

Each run of the template loop creates an opening <div>, but there’s only one closing </div> at the end, so the <div> elements for the results end up nested in each other, from first to last. Browsers are pretty good at still making sense of such broken HTML, but it’s likely to cause style problems.

Oh, thank you for the observations. I changed my code a little bit but it doesn’t seem to change the overlapping results. This is what I have:

   {% if species %}
        {% for s in species %}
    <div>
        <h4>{{s.Name}}</h4>
        <h5 style="color:lightslategray;">
            Classification: {{s.Classification}}
            <br>Eye colors: {{ s.Eye_Colors }}
            <br>Hair colors: {{s.Hair_Colors}}
         </h5>
    </div>
        {% endfor %}
    {% endif %}

Do you know why this happens? Thank you for the help!

There’s very little in the HTML that might cause this. Possibly having <br> elements in a headline (<h5>), where they’re not supposed to be. But more likely it’s something caused by CSS errors, e.g. fixed height or absolute positions. Hard to say what’s really going on without seeing the active site.

1 Like

Oh, it must be something in the css because since the positions for the boxes are very specific they must be piled up on top of each other. This is what happens:box

I figured it out in the end! Thank you for all the help.

1 Like