1598458235
Terms related to Search algorithms
Before we dive into types of search algorithms there are some basic terms that we need to know.
1.Search space: it is a set of all possible solutions that the user can have
2. Start space: it is the beginning point of the search to be carried out
3.Goal test: a function that checks the current state and returns whether the goal has been reached
4. Actions: It gives the description of all the available actions to the agent.
Transition model: A description of what each action do, can be represented as a transition model.
Path Cost: It is a function which assigns a numeric cost to each path.
Solution: It is an action sequence which leads from the start node to the goal node.
Optimal Solution: If a solution has the lowest cost among all solutions.
Types of Search Algorithms:
There are way too many search algorithms out there but in this article we shall have a look at basic fundamental search algorithms that are broadly divided into 2 categories: Uninformed and informed search algorithms.
The terms related to it, broad classification of the algorithms and had a close look at Uninformed search algorithms where the solver does not have any additional information apart from the ones given in problem statement.
#artificial-intelligence
1603767600
Today, let us touch base on some fundamental concepts like search algorithms.
In simple terms, **searching **is a process of looking up a particular data record in the database or in the collection of items. A search typically answers as true or false whether the particular data in which we are referring is found or not and perform the next action accordingly.
Commonly used algorithms for search are:
Let us understand them in detail with some example
Linear Search Algorithm is the simplest and easiest form of the search algorithm. In this algorithm, a sequential search is made over all the items one by one to search for the targeted item. Each item is checked in sequence until the match is found. If the match is found, the searched item is returned otherwise the search continues till the end.
To make it easy to understand, let us see understand linear search using a flow diagram
Linear Search — Data Flow
In _Binary search algorithm, _begins with an interval covering the whole array and diving it in half. If the value of the search key is less than the item in the middle of the interval, narrow the interval to the lower half. Otherwise narrow it to the upper half. Repeatedly check until the value is found or the interval is empty.
To make it easy to understand, let us see understand binary search using flow diagram and example as below.
Binary Search — Data Flow
#sorting-algorithms #algorithms #data-structures #search-and-sort #searching-algorithm
1596737760
We have to search for a value **x **in a sorted matrix M. If x **exists, then return its coordinates **(i, j), else return (-1, -1).
Let us consider the above matrix as an example. In this example, we are going to search for the value 12. Since 12 is present in the matrix, the algorithm should return its coordinates (2, 1)
A simple approach is to traverse all the values in the matrix and check if it is equal to 12.
The worst case time complexity of the above algorithm will be
_O(n x m) = O(n²) __when _n = m
The above algorithm behaves worse for large values of n and m. Let us look into the efficient algorithm now.
1\. Start from Top Right position (0, m - 1) in the matrix M
2\. If the value is equal to x return (0, m - 1)
3\. Move one row down if the current value is less than x
4\. Move one column left if the current value is greater than x
Let us apply this algorithm into our matrix M. We are going to search for the value 12 in M
#data-structures #search-sorted-matrix #2d-binary-search #algorithms #matrix-search #algorithms
1597045745
Searching Algorithms are designed to check for an element or retrieve an element from any data structure where it is stored. Based on the type of search operation, these algorithms are generally classified into two categories:
Linear Search: The idea is to traverse the given array arr[] and find the index at which the element is present. Below are the steps:
#java #searching #algorithms-searching #binary search
1598518020
When searching for data, the difference between a fast application and a slower one lies in the accurate use of search algorithm. Searching algorithms is a basic, fundamental step in computing done via step-by-step method to locate a specific data among a collection of data.
All search algorithms make use of a search key in order to complete the procedure. And they are expected to return a success or a failure status ( in boolean true or false value).
In computer science, there are various type of search algorithms available and the way they are used decides the performance and efficiency of the data available( the manner in which the data is being used).
What is a Search Algorithm?
According to Wikipedia- Search algorithm is-
Any algorithm which solves the search problem, namely, to retrieve information stored within some data structure, or calculated in the search space of a problem domain, either with discrete or continuous values.
Searching Algorithms are designed to check or retrieve an element from any data structure where it is being stored.
They search for a target (key) in the search space, like-
#data structure #algorithm skills #algorithms #searching algorithms #big data
1637932920
Willkommen zum heutigen Tutorial. Im heutigen Tutorial erfahren Sie, wie Sie Filter erstellen und nach Produkten suchen. Um dieses Projekt zu erstellen, benötigen wir HTML, CSS und Javascript. Da dies ein ziemlich fortgeschrittenes Projekt ist, würde ich es keinem Javascript-Anfänger empfehlen. Wenn Sie ein Fortgeschrittener oder Experte in Javascript sind, können Sie auf jeden Fall weitermachen und dieses machen.
Lassen Sie uns einen Überblick darüber geben, was dieses Projekt wirklich ist. Das Projekt umfasst eine Reihe von Produktkarten. Jeder dieser Karten ist ein Name, ein Preis und eine Kategorie zugeordnet. Über diesen Tags befindet sich eine Suchleiste, in der Benutzer anhand des Namens nach einem Produkt suchen können.
Unterhalb der Suchleiste befindet sich eine Gruppe von Schaltflächen. Jede dieser Schaltflächen hat einen Kategorienamen. Wenn der Benutzer auf eine dieser Schaltflächen klickt, werden die Produkte angezeigt, die dieser bestimmten Kategorie entsprechen.
Lassen Sie uns nun zunächst die Projektverzeichnisstruktur erstellen, damit wir mit dem Codieren beginnen können. Wir beginnen damit, einen Projektordner mit dem Namen "Filters and Product Search" zu erstellen. In diesem Ordner erstellen wir drei Dateien. Das erste ist index.html
, das zweite ist style.css
und das dritte ist script.js
. Diese Dateien sind HTML-Dokumente, Stylesheets bzw. Skriptdateien.
Wir beginnen mit dem HTML-Code. Kopieren Sie zunächst den folgenden Code und fügen Sie ihn in Ihre HTML-Datei ein.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Filter And Search</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div id="search-container">
<input
type="search"
id="search-input"
placeholder="Search product name here.."
/>
<button id="search">Search</button>
</div>
<div id="buttons">
<button class="button-value" onclick="filterProduct('all')">All</button>
<button class="button-value" onclick="filterProduct('Topwear')">
Topwear
</button>
<button class="button-value" onclick="filterProduct('Bottomwear')">
Bottomwear
</button>
<button class="button-value" onclick="filterProduct('Jacket')">
Jacket
</button>
<button class="button-value" onclick="filterProduct('Watch')">
Watch
</button>
</div>
<div id="products"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Um diesem Projekt Stile hinzuzufügen, verwenden wir CSS. Kopieren Sie nun den folgenden Code und fügen Sie ihn in Ihre CSS-Datei ein.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f5f8ff;
}
.wrapper {
width: 95%;
margin: 0 auto;
}
#search-container {
margin: 1em 0;
}
#search-container input {
background-color: transparent;
width: 40%;
border-bottom: 2px solid #110f29;
padding: 1em 0.3em;
}
#search-container input:focus {
border-bottom-color: #6759ff;
}
#search-container button {
padding: 1em 2em;
margin-left: 1em;
background-color: #6759ff;
color: #ffffff;
border-radius: 5px;
margin-top: 0.5em;
}
.button-value {
border: 2px solid #6759ff;
padding: 1em 2.2em;
border-radius: 3em;
background-color: transparent;
color: #6759ff;
cursor: pointer;
}
.active {
background-color: #6759ff;
color: #ffffff;
}
#products {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 1.5em;
padding: 2em 0;
}
.card {
background-color: #ffffff;
max-width: 18em;
margin-top: 1em;
padding: 1em;
border-radius: 5px;
box-shadow: 1em 2em 2.5em rgba(1, 2, 68, 0.08);
}
.image-container {
text-align: center;
}
img {
max-width: 100%;
object-fit: contain;
height: 15em;
}
.container {
padding-top: 1em;
color: #110f29;
}
.container h5 {
font-weight: 500;
}
.hide {
display: none;
}
@media screen and (max-width: 720px) {
img {
max-width: 100%;
object-fit: contain;
height: 10em;
}
.card {
max-width: 10em;
margin-top: 1em;
}
#products {
grid-template-columns: auto auto;
grid-column-gap: 1em;
}
}
Schließlich müssen wir dem Filter Funktionen hinzufügen und auch die Suchfunktion implementieren. Damit es funktioniert, fügen wir Javascript hinzu. Kopieren Sie den unten angegebenen Code und fügen Sie ihn in Ihre Javascript-Datei ein.
let products = {
data: [
{
productName: "Regular White T-Shirt",
category: "Topwear",
price: "30",
image: "white-tshirt.jpg",
},
{
productName: "Beige Short Skirt",
category: "Bottomwear",
price: "49",
image: "short-skirt.jpg",
},
{
productName: "Sporty SmartWatch",
category: "Watch",
price: "99",
image: "sporty-smartwatch.jpg",
},
{
productName: "Basic Knitted Top",
category: "Topwear",
price: "29",
image: "knitted-top.jpg",
},
{
productName: "Black Leather Jacket",
category: "Jacket",
price: "129",
image: "black-leather-jacket.jpg",
},
{
productName: "Stylish Pink Trousers",
category: "Bottomwear",
price: "89",
image: "pink-trousers.jpg",
},
{
productName: "Brown Men's Jacket",
category: "Jacket",
price: "189",
image: "brown-jacket.jpg",
},
{
productName: "Comfy Gray Pants",
category: "Bottomwear",
price: "49",
image: "comfy-gray-pants.jpg",
},
],
};
for (let i of products.data) {
//Create Card
let card = document.createElement("div");
//Card should have category and should stay hidden initially
card.classList.add("card", i.category, "hide");
//image div
let imgContainer = document.createElement("div");
imgContainer.classList.add("image-container");
//img tag
let image = document.createElement("img");
image.setAttribute("src", i.image);
imgContainer.appendChild(image);
card.appendChild(imgContainer);
//container
let container = document.createElement("div");
container.classList.add("container");
//product name
let name = document.createElement("h5");
name.classList.add("product-name");
name.innerText = i.productName.toUpperCase();
container.appendChild(name);
//price
let price = document.createElement("h6");
price.innerText = "$" + i.price;
container.appendChild(price);
card.appendChild(container);
document.getElementById("products").appendChild(card);
}
//parameter passed from button (Parameter same as category)
function filterProduct(value) {
//Button class code
let buttons = document.querySelectorAll(".button-value");
buttons.forEach((button) => {
//check if value equals innerText
if (value.toUpperCase() == button.innerText.toUpperCase()) {
button.classList.add("active");
} else {
button.classList.remove("active");
}
});
//select all cards
let elements = document.querySelectorAll(".card");
//loop through all cards
elements.forEach((element) => {
//display all cards on 'all' button click
if (value == "all") {
element.classList.remove("hide");
} else {
//Check if element contains category class
if (element.classList.contains(value)) {
//display element based on category
element.classList.remove("hide");
} else {
//hide other elements
element.classList.add("hide");
}
}
});
}
//Search button click
document.getElementById("search").addEventListener("click", () => {
//initializations
let searchInput = document.getElementById("search-input").value;
let elements = document.querySelectorAll(".product-name");
let cards = document.querySelectorAll(".card");
//loop through all elements
elements.forEach((element, index) => {
//check if text includes the search value
if (element.innerText.includes(searchInput.toUpperCase())) {
//display matching card
cards[index].classList.remove("hide");
} else {
//hide others
cards[index].classList.add("hide");
}
});
});
//Initially display all products
window.onload = () => {
filterProduct("all");
};
Ihre Produktsuche und -filterung ist nun fertig. Ich hoffe, Ihnen hat das Tutorial gefallen.