Searching through data is a common requirement in many web applications. A well-designed search component can greatly enhance the user experience by enabling quick and efficient access to relevant information. This article will guide you through the process of building a search component using evidence.dev in combination with UIkit.
What are we building?
Find a demo of what you'll build @ https://demo.fact.ist/search
Technologies Used
- HTML: For structuring the search input and display elements.
- JavaScript: For handling the search logic and dynamic updates.
- SQL: For querying the database to retrieve customer and order data.
- CSS: For styling the search component.
- UIkit: A lightweight and modular front-end framework for developing fast and powerful web interfaces.
1. Setting Up the HTML Structure
The HTML structure consists of a search form, a datalist for auto-complete suggestions, and a section to display the search results.
<div class="uk-container-large">
<h2>Search customer orders</h2>
<div class="uk-margin">
<form class="uk-search uk-search-default uk-width-1-1" on:submit|preventDefault>
<input
class="uk-search-input"
type="search"
placeholder="Type customer names..."
aria-label="Search"
uk-tooltip="title: Search for customers...; pos: top-left"
bind:value={searchTerm}
list="customers"
>
<button class="uk-button uk-button-primary uk-margin-small uk-button-small" type="button" on:click={search}>Go →</button>
<button class="uk-button uk-button-default uk-margin-small uk-button-small" type="button" on:click={resetSearch}>Reset</button>
</form>
</div>
<datalist id="customers">
{#each customers as cr}
<option value="{cr.customer_name}">{cr.customer_name} ({cr.orders})</option>
{/each}
</datalist>
<hr />
{#if filteredRecords.length > 0 && searchTerm.length > 0 && searchClicked}
<div class="uk-child-width-1-4@m uk-grid-small uk-grid-match" uk-grid>
{#each filteredRecords as recs}
<div>
<div class="uk-card uk-card-default uk-card-body" style="background:#f7f7f7;border:1px solid #ccc;border-radius:5px;padding:20px 30px;">
<h3 class="uk-card-title" style="color:#555 !important;font-size:1em !important;">{recs.product_name}</h3>
<p style="color:#111 !important;font-size:0.9em !important;">
Order ID: {recs.order_id}<br />
Order date: {formatDate(recs.order_date)} <br />
Order amount: $ {recs.sales} <br />
Order quantity: {recs.quantity}
</p>
</div>
</div>
{/each}
</div>
{:else}
<p style="color:#777;">Start using the search above to find customers...</p>
{/if}
</div>
2. Implementing the JavaScript Logic
The JavaScript logic handles the search functionality, filtering records based on the search term, and resetting the search.
<script>
let searchTerm = '';
let filteredRecords = [];
let searchClicked = false;
function search() {
filteredRecords = records.filter(record =>
record.customer_name.toLowerCase().includes(searchTerm.toLowerCase())
);
searchClicked = true;
}
function resetSearch() {
searchTerm = '';
filteredRecords = [];
searchClicked = false;
}
function formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based, so add 1
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
</script>
3. Querying the Database
The SQL queries fetch the necessary data from the database. The first query retrieves all records, while the second query groups the records by customer and counts the distinct orders.
-- Fetch all records
select * from csv.global_superstore
order by order_date desc;
-- Group by customer and count distinct orders
select
customer_name,
count(distinct order_id) as orders
from ${records} rc
group by all
order by 2 desc;
4. Styling the Component
Using UIkit, we can style the search component to make it visually appealing and user-friendly. The CSS styles are embedded within the HTML structure to ensure a consistent look and feel.
<!-- Example of a styled card -->
<div class="uk-card uk-card-default uk-card-body" style="background:#f7f7f7;border:1px solid #ccc;border-radius:5px;padding:20px 30px;">
<h3 class="uk-card-title" style="color:#555 !important;font-size:1em !important;">{recs.product_name}</h3>
<p style="color:#111 !important;font-size:0.9em !important;">
Order ID: {recs.order_id}<br />
Order date: {formatDate(recs.order_date)} <br />
Order amount: $ {recs.sales} <br />
Order quantity: {recs.quantity}
</p>
</div>
Conclusion
Building a search component for customer orders can significantly enhance the user experience by providing quick and efficient access to relevant data. By following the steps outlined in this article, you can create a robust and user-friendly search component using modern web development technologies. Whether you're developing an e-commerce platform, a CRM system, or an inventory management tool, this search component will prove to be a valuable addition to your application.
FAQs
1. Can I use a different CSS framework instead of UIkit?
Absolutely! While this guide uses UIkit, you can substitute it with other CSS frameworks like Bootstrap or Tailwind CSS. Just make sure to adjust the class names and styles accordingly.
2. How can I make the search case-insensitive?
The search function in the provided JavaScript logic already handles case insensitivity by converting both the search term and customer names to lowercase before comparison.
3. Can I implement this search component in a React or Vue application?
Yes, you can. The core logic remains the same, but you'll need to adapt the code to fit the React or Vue framework syntax and structure.
4. How do I handle large datasets to prevent performance issues?
For large datasets, consider implementing server-side search or using pagination to limit the number of records loaded at once. This will help maintain performance and responsiveness.
5. Can I add more fields to the search criteria?
Definitely! You can modify the search function to include additional fields like order date, order amount, etc. Just update the filter logic to match these fields against the search term.
