Hello, I’m Zi Dong! There are fans to achieve global search function do not know how to achieve, let me out of a set of tutorials, originally very busy today, but for the family, I also want to squeeze time out of liver a tutorial ah!
No more nonsense, let’s begin! This tutorial is based on the library management system to achieve global search function. For example, a search for Python programs in the search box will bring up information about the book, as shown in the figure below. Let’s implement this.
First, the realization of global search function
1. The general flow chart of implementation is as follows:
2. Write the following code in the routing function url.py
path("search/", views.search,name="search"),
Copy the code3. Draw the search box. The renderings are as follows:
The HTML code is as follows:
<li class="nav-item"> <form action="{% url "librarian:search" %}" method="post"> {% csrf_token %} <div class="card-body"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i Class ="zmdi zmdi-book"></ I ></ div> <input type="text" name="search_keywords" class="form-control"/> • <div Class ="input-group-append"> <button class="btn-outline- Facebook ">< I class="fa fa-search"></ I ></button> </div> </div> </div> </form> </li>Copy the code4. Functions to be implemented in views.py
The main implementation of QuerySet query function in the view function, from the database to search the object returned to the front page. If you are not familiar with QuerySet, check out this Django development tutorial: QuerySet Concepts and Operations.
(1) Get the keywords entered by the user from the front end
search_keywords = request.POST.get("search_keywords", "")
Copy the code(2) Query data from the database according to the keyword
if search_keywords: Books_obj_list = models. Books. Objects. The filter (Q (book_name = search_keywords) | Q (author = search_keywords)) # based on keyword search database records, publishers_obj_list = models.Publisher.objects.filter( Q(name=search_keywords) | Q(address=search_keywords))Copy the codeIn the above method, we use Q query, filter() and other keyword parameter query is the operation of ‘and’, if we need to execute more complex query (such as OR statement), we can use Q object.
Q and | object (or), & (and), () () brackets, ~ (non) for joint useCopy the codeNote: When mixing Q objects with keywords, the keywords should be written at the end.
In fact, the code above is accurate query, if you want to achieve fuzzy query, you can use icontaines (queries are case-insensitive) search queries.
if search_keywords: books_obj_list = models.Books.objects.filter( Q(book_name__icontains=search_keywords) | Q(author__icontaines =search_keywords)) # Icontains is case-insensitive publishers_obj_list = models. Publisher. Objects. The filter (Q (name__icontains = search_keywords) | Q(address=search_keywords))Copy the code(3) To judge the query results, used to control front page rendering.
Here the main query books and publishing house two database table data, if you can query data from the book data table to the front page returned True, let it draw the book query results, the publishing house as well.
If len(books_obj_list) = len(books_obj_list) = 0: publs_search_result = True = 0: publishers_search_result = True else: error_msg = "no result was found, please enter again"Copy the codeThe complete code is as follows:
def search(request): Search_keywords = request.post.get ("search_keywords", "") # print(search_keywords) if search_keywords: books_obj_list = models.Books.objects.filter( Q(book_name__icontains=search_keywords) | Q(author__icontaines =search_keywords)) # Icontains is case-insensitive publishers_obj_list = models. Publisher. Objects. The filter (Q (name__icontains = search_keywords) | Q(address=search_keywords)) # if len(books_obj_list)! Books_search_result = True elif len(publishers_obj_list)! Publishers_search_result = True else: error_msg = "publishers_search_result = True else: error_msg =" Return render(request, "search_result.html", locals())Copy the code(4) Draw the query result page
Draws the page based on the value of the view function passed to the front end.
- If books_search_result == True, draw the book query result page
- Elif publishers_search_result == True If True, draw publisher query result page
All the codes of the query result page are as follows:
{% if books_search_result == True %}
<div class="content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card gradient-forest">
<div class="card gradient-forest"><h4 style="color:red">Book Search Results</h4></div>
<div class="card-body text-center p-5">
<div class="table-responsive">
<div id="default-datatable_wrapper"
class="dataTables_wrapper container-fluid dt-bootstrap4">
<div class="row">
<div class="col-sm-12">
<table class="table table-dark table-striped shadow-dark"
role="grid" aria-describedby="default-datatable_info">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0"
aria-controls="default-datatable" rowspan="1" colspan="1"
aria-sort="ascending"
aria-label="Name: activate to sort column descending"
style="width: 50px; font-size:17px">
<p>Book number</p>
</th>
<th class="sorting" tabindex="0"
aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Position: activate to sort column ascending"
style="width: 100px; font-size:17px"><p>The name of the book</p>
</th>
<th class="sorting" tabindex="0"
aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Office: activate to sort column ascending"
style="width: 100px; font-size:17px"><p>The book pictures</p>
</th>
<th class="sorting" tabindex="0"
aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Office: activate to sort column ascending"
style="width: 100px; font-size:17px"><p>Book type</p>
</th>
<th class="sorting" tabindex="0"
aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Office: activate to sort column ascending"
style="width: 100px; font-size:17px"><p>The author</p>
</th>
<th class="sorting" tabindex="0"
aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Office: activate to sort column ascending"
style="width: 100px; font-size:17px"><p>The book price</p>
</th>
<th class="sorting" tabindex="0"
aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Office: activate to sort column ascending"
style="width: 100px; font-size:17px"><p>Book score</p>
</th>
<th class="sorting" tabindex="0"
aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Office: activate to sort column ascending"
style="width: 101px; font-size:17px"><p>Book description</p>
</th>
<th class="sorting" tabindex="0"
aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Office: activate to sort column ascending"
style="width: 100px; font-size:17px"><p>Book sales</p>
</th>
<th class="sorting" tabindex="0"
aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Office: activate to sort column ascending"
style="width: 100px; font-size:17px"><p>Volume of book Reviews</p>
</th>
<th class="sorting" tabindex="0"
aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Office: activate to sort column ascending"
style="width: 100px; font-size:17px"><p>The book inventory</p>
</th>
<th class="sorting" tabindex="0"
aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Office: activate to sort column ascending"
style="width: 100px; font-size:17px"><p>Press.</p>
</th>
</tr>
</thead>
<tbody>
{% for book_obj in books_obj_list %}
<tr role="row" class="odd">
<td class="sorting_1"
style="width: 50px">{{ book_obj.book_num }}</td>
<td>{{ book_obj.book_name }}</td>
<! -- Use pop-up boxes to display book details -->
<td>
<a href="{% static book_obj.image_set.first.img_address.name %}"
data-fancybox="group2"
data-caption="{{ book_obj.book_name }}">
<img src="{% static book_obj.image_set.first.img_address.name %}"
alt="lightbox"
class="lightbox-thumb img-thumbnail">
</a>
</td>
<td>{{ book_obj.book_type }}</td>
<td>{{ book_obj.author }}</td>
<td>{{ book_obj.book_price }}</td>
<td>{{ book_obj.book_score }}</td>
<td style="width: 100px">
<div style="width:100px; overflow: hidden; text-overflow: ellipsis">{{ book_obj.book_description }}</div>
</td>
<td>{{ book_obj.book_sales }}</td>
<td>{{ book_obj.comment_nums }}</td>
<td>{{ book_obj.book_inventory }}</td>
<td>{{ book_obj.publisher.name }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><! -- End Row-->
</div>
{% elif publishers_search_result == True %}
<div class="content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card gradient-forest">
<div class="card gradient-forest"><h4 style="color:red">Search Results by Publishing House</h4></div>
<div class="card-body text-center p-5">
<div class="table-responsive">
<div id="default-datatable_wrapper"
class="dataTables_wrapper container-fluid dt-bootstrap4">
</div>
<div class="row">
<div class="col-sm-12">
<table class="table table-dark table-striped shadow-dark">
<thead>
<tr role="row" class="odd">
<th class="sorting_asc" tabindex="0"
aria-controls="default-datatable" rowspan="1" colspan="1"
aria-sort="ascending"
aria-label="Name: activate to sort column descending"
style="width: 140px; font-size:17px">
<p>Press the id</p>
</th>
<th class="sorting" tabindex="0" aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Name: activate to sort column descending"
style="width: 225px; font-size:17px"><p>Press.</p>
</th>
<th class="sorting" tabindex="0" aria-controls="default-datatable"
rowspan="1" colspan="1"
aria-label="Name: activate to sort column descending"
style="width: 101px; font-size:17px"><p>Address of Publisher</p>
</th>
</tr>
</thead>
<tbody>
{% for publisher_obj in publishers_obj_list %}
<tr role="row" class="odd">
<td class="sorting_1">{{ publisher_obj.id }}</td>
<td>{{ publisher_obj.name }}</td>
<td>{{ publisher_obj.address }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% else %}
<div id="wrapper">
<div class="container" style="margin: 20px 310px">
<div class="row">
<div class="col-md-12">
<div class="text-center error-pages">
<h1 class="error-title text-white"> 404</h1>
<h2 class="error-sub-title text-white">The query fails</h2>
<p class="error-message text-white text-uppercase">{{ error_msg }}</p>
<div class="mt-4">
<a href="/librarian/index/" class="btn btn-info btn-round shadow-info m-1">Return to the home page</a>
{# <a href="javascript:void();" class="btn btn-info btn-round m-1">Previous Page </a>#}
</div>
<hr class="w-50 border-light-2">
<hr class="w-50 border-light-2">
</div>
</div>
</div>
</div>
</div><! --wrapper-->
{% endif %}
Copy the codeQuery book result page, as shown in the figure below
Query the publishing house result page, as shown in the figure below
If the query fails, the following figure shows the page effect.
2. Solve the sidebar problem
To realize the function of the sidebar shown in the following figure, it is actually very simple, that is, the UL label under the LI label nested ul… Li tag and a tag to achieve.
The code to achieve the above effect is as follows:
<ul class="sidebar-menu do-nicescrol">
<li class="sidebar-header">The main navigation</li>
<li>
<a href="index.html" class="waves-effect">
<i class="zmdi zmdi-view-dashboard"></i> <span>Publisher Management Page</span> <i
class="fa fa-angle-left pull-right"></i>
</a>
<ul class="sidebar-submenu">
<li><a href="/librarian/add_publisher"><i class="zmdi zmdi-star-outline"></i>Add publishing house</a></li>
<li><a href="/librarian/publisher_list/"><i class="zmdi zmdi-star-outline"></i>List of publishers</a></li>
</ul>
</li>
<li>
<a href="javaScript:void();" class="waves-effect">
<i class="zmdi zmdi-layers"></i>
<span>Library Management Page</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="sidebar-submenu">
<li><a href="/librarian/add_book"><i class="zmdi zmdi-star-outline"></i>Add books</a></li>
<li><a href="/librarian/book_list"><i class="zmdi zmdi-star-outline"></i>The book list</a></li>
</ul>
</li>
<li>
<a href="javaScript:void();" class="waves-effect">
<i class="zmdi zmdi-gamepad"></i> <span>Author Management page</span>
<i class="fa fa-angle-left float-right"></i>
</a>
<ul class="sidebar-submenu">
<li><a href="/librarian/add_author"><i class="zmdi zmdi-star-outline"></i>Add the author</a></li>
<li><a href="/librarian/author_list"><i class="zmdi zmdi-star-outline"></i>The author list</a></li>
</ul>
</li>
<li>
<a href="javaScript:void();" class="waves-effect">
<i class="zmdi zmdi-gamepad"></i> <span>User Management page</span>
<i class="fa fa-angle-left float-right"></i>
</a>
<ul class="sidebar-submenu">
<li><a href="/librarian/add_user"><i class="zmdi zmdi-star-outline"></i>Add user</a></li>
<li><a href="/librarian/user_list"><i class="zmdi zmdi-star-outline"></i>List of users</a></li>
</ul>
</li>
<li class="sidebar-header">More and more</li>
<li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-share text-info"></i> <span>Information</span></a>
</li>
</ul>
Copy the codeI’m Zi Dong, see you next time!