I have a web page where it display the user's details such as their first name and last name, username, email etc. But I only can search either the user's first name or the last name in the search bar, how do I make it so that the user is able to type both the user's first name and last name and display the details out?

This is how my web page looks like as shown in the picture below (Ex: The staff name display is admin (First name) and Tan (Last name):

views.py

@login_required()
def allstaff(request):
    search_post = request.GET.get('q')
    if (search_post is not None) and search_post:
        allusername = User.objects.filter(Q(first_name__icontains=search_post) | Q(last_name__icontains=search_post) | Q(
            username__icontains=search_post) | Q(email__icontains=search_post))
        if not allusername:
            allusername = User.objects.all().order_by("-date_joined")
    else:
        allusername = User.objects.all().order_by("-date_joined")

    page = request.GET.get('page')
    paginator = Paginator(allusername, 3)
    try:
        allusername = paginator.page(page)
    except PageNotAnInteger:
        allusername = paginator.page(1)
    except EmptyPage:
        allusername = paginator.page(paginator.num_pages)


    context = {'allusername': allusername, 'query': search_post}

    return render(request, 'allstaff.html', context)

allstaff.html

{% extends "home.html" %}
{% block content %}
<style>
table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}



</style>


   <div style="padding-left:16px">
     <br>
       <div class="form-block">
         <h5>Search for Staff First Name/ Staff Username</h5>
        <form class="form-inline my-2 my-lg-0" action="{% url 'allstaff' %}" method='GET' value='{{ request.GET.q }}'>
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" name="q" value='{{ request.GET.q }}'/>
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
           <br>

 <div class="form-block">
     <table>
  <tr>
    <th>Staff Name</th>
      <th>Staff Username</th>
      <th>Email</th>
      <th>Date Joined</th>
      <th>Last Login</th>
      <th>Admin</th>
      <th>Customer Service</th>
      <th>Logistic</th>
      <th>Action</th>
  </tr>
         {% for user in allusername %}


  <tr>
        <td>{{user.first_name}} {{user.last_name}}</td>
      <td>{{user.username}}</td>
      <td>{{user.email}}</td>
      <td>{{user.date_joined}}</td>
      <td>{{user.last_login}}</td>
      <td>{{user.is_admin}}</td>
      <td>{{user.is_customer}}</td>
      <td>{{user.is_logistic}}</td>
      <td>
            <form action="{% url 'update' user.id %}" method="post">
              {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-info">Update</button>
      </form>

      </td>
      <td>

          <form action="{% url 'delete' user.id %}" method="post">
              {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-danger">Delete</button>
      </form>
      </td>
     </tr>

{% endfor %}

</table>

     {% if allusername.has_other_pages %}

  <ul class="pagination pr-3 mr-1 ml-auto">

    {% if allusername.has_previous %}
      <li><a href="?q={{ query|urlencode }}&page={{ allusername.previous_page_number }}">&laquo;</a></li>
    {% else %}
      <li class="disabled"><span>&laquo;</span></li>
    {% endif %}
    {% for i in allusername.paginator.page_range %}
      {% if allusername.number == i %}
        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
      {% else %}
        <li><a href="?q={{ query|urlencode }}&page={{ i }}">{{ i }}</a></li>
      {% endif %}
    {% endfor %}
    {% if allusername.has_next %}
      <li><a href="?q={{ query|urlencode }}&page={{ allusername.next_page_number }}">&raquo;</a></li>
    {% else %}
      <li class="disabled"><span>&raquo;</span></li>
    {% endif %}
    </ul>
    {% endif %}

     <br>
     <h5>*Note: True means that the staff is in this role, False means that the staff is not in this role.</h5>




</div>
       </div>
   </div>
{% endblock %}

CodePudding user response：

You can use Concat database function. User.objects.annotate(full_name=Concat("first_name", V(" "), "last_name"))

from django.db.models import Value as V
from django.db.models.functions import Concat

@login_required()
def allstaff(request):
    search_post = request.GET.get('q')
    if (search_post is not None) and search_post:
        allusername = User.objects.annotate(full_name=Concat("first_name", V(" "), "last_name")).filter(Q(full_name=search_post)| Q(first_name__icontains=search_post) | Q(last_name__icontains=search_post) | Q(
            username__icontains=search_post) | Q(email__icontains=search_post))
        if not allusername:
            allusername = User.objects.all().order_by("-date_joined")
    else:
        allusername = User.objects.all().order_by("-date_joined")

    page = request.GET.get('page')
    paginator = Paginator(allusername, 3)
    try:
        allusername = paginator.page(page)
    except PageNotAnInteger:
        allusername = paginator.page(1)
    except EmptyPage:
        allusername = paginator.page(paginator.num_pages)


    context = {'allusername': allusername, 'query': search_post}

    return render(request, 'allstaff.html', context)