SphinxQL Query Builder: Query The Sphinx Search Engine

Query Builder for SphinxQL

About

This is a SphinxQL Query Builder used to work with SphinxQL, a SQL dialect used with the Sphinx search engine and it's fork Manticore. It maps most of the functions listed in the SphinxQL reference and is generally faster than the available Sphinx API.

This Query Builder has no dependencies except PHP 7.1 or later, \MySQLi extension, PDO, and Sphinx/Manticore.

Missing methods?

SphinxQL evolves very fast.

Most of the new functions are static one liners like SHOW PLUGINS. We'll avoid trying to keep up with these methods, as they are easy to just call directly ((new SphinxQL($conn))->query($sql)->execute()). You're free to submit pull requests to support these methods.

If any feature is unreachable through this library, open a new issue or send a pull request.

Code Quality

The majority of the methods in the package have been unit tested.

The only methods that have not been fully tested are the Helpers, which are mostly simple shorthands for SQL strings.

How to Contribute

Pull Requests

1. Fork the SphinxQL Query Builder repository
2. Create a new branch for each feature or improvement
3. Submit a pull request from each branch to the master branch

It is very important to separate new features or improvements into separate feature branches, and to send a pull request for each branch. This allows me to review and pull in new features or improvements individually.

Style Guide

All pull requests must adhere to the PSR-2 standard.

Unit Testing

All pull requests must be accompanied by passing unit tests and complete code coverage. The SphinxQL Query Builder uses phpunit for testing.

Learn about PHPUnit

Installation

This is a Composer package. You can install this package with the following command: composer require foolz/sphinxql-query-builder

Usage

The following examples will omit the namespace.

<?php
use Foolz\SphinxQL\SphinxQL;
use Foolz\SphinxQL\Drivers\Mysqli\Connection;

// create a SphinxQL Connection object to use with SphinxQL
$conn = new Connection();
$conn->setParams(array('host' => 'domain.tld', 'port' => 9306));

$query = (new SphinxQL($conn))->select('column_one', 'colume_two')
    ->from('index_ancient', 'index_main', 'index_delta')
    ->match('comment', 'my opinion is superior to yours')
    ->where('banned', '=', 1);

$result = $query->execute();

Drivers

We support the following database connection drivers:

• Foolz\SphinxQL\Drivers\Mysqli\Connection
• Foolz\SphinxQL\Drivers\Pdo\Connection

Connection

$conn = new Connection()

Create a new Connection instance to be used with the following methods or SphinxQL class.

$conn->setParams($params = array('host' => '127.0.0.1', 'port' => 9306))

Sets the connection parameters used to establish a connection to the server. Supported parameters: 'host', 'port', 'socket', 'options'.

$conn->query($query)

Performs the query on the server. Returns a ResultSet object containing the query results.

More methods are available in the Connection class, but usually not necessary as these are handled automatically.

SphinxQL

new SphinxQL($conn)

Creates a SphinxQL instance used for generating queries.

Bypass Query Escaping

Often, you would need to call and run SQL functions that shouldn't be escaped in the query. You can bypass the query escape by wrapping the query in an \Expression.

SphinxQL::expr($string)

Returns the string without being escaped.

Query Escaping

There are cases when an input must be escaped in the SQL statement. The following functions are used to handle any escaping required for the query.

$sq->escape($value)

Returns the escaped value. This is processed with the \MySQLi::real_escape_string() function.

$sq->quoteIdentifier($identifier)

Adds backtick quotes to the identifier. For array elements, use $sq->quoteIdentifierArray($arr).

$sq->quote($value)

Adds quotes to the value and escapes it. For array elements, use $sq->quoteArr($arr).

$sq->escapeMatch($value)

Escapes the string to be used in MATCH.

$sq->halfEscapeMatch($value)

Escapes the string to be used in MATCH. The following characters are allowed: -, |, and ".

Refer to $sq->match() for more information.

SELECT

$sq = (new SphinxQL($conn))->select($column1, $column2, ...)->from($index1, $index2, ...)

Begins a SELECT query statement. If no column is specified, the statement defaults to using *. Both $column1 and $index1 can be arrays.

INSERT, REPLACE

This will return an INT with the number of rows affected.

$sq = (new SphinxQL($conn))->insert()->into($index)

Begins an INSERT.

$sq = (new SphinxQL($conn))->replace()->into($index)

Begins an REPLACE.

$sq->set($associative_array)

Inserts an associative array, with the keys as the columns and values as the value for the respective column.

$sq->value($column1, $value1)->value($column2, $value2)->value($column3, $value3)

Sets the value of each column individually.

$sq->columns($column1, $column2, $column3)->values($value1, $value2, $value3)->values($value11, $value22, $value33)

Allows the insertion of multiple arrays of values in the specified columns.

Both $column1 and $index1 can be arrays.

UPDATE

This will return an INT with the number of rows affected.

$sq = (new SphinxQL($conn))->update($index)

Begins an UPDATE.

$sq->value($column1, $value1)->value($column2, $value2)

Updates the selected columns with the respective value.

$sq->set($associative_array)

Inserts the associative array, where the keys are the columns and the respective values are the column values.

DELETE

Will return an array with an INT as first member, the number of rows deleted.

$sq = (new SphinxQL($conn))->delete()->from($index)->where(...)

Begins a DELETE.

WHERE

$sq->where($column, $operator, $value)

Standard WHERE, extended to work with Sphinx filters and full-text.

<?php
// WHERE `column` = 'value'
$sq->where('column', 'value');

// WHERE `column` = 'value'
$sq->where('column', '=', 'value');

// WHERE `column` >= 'value'
$sq->where('column', '>=', 'value');

// WHERE `column` IN ('value1', 'value2', 'value3')
$sq->where('column', 'IN', array('value1', 'value2', 'value3'));

// WHERE `column` NOT IN ('value1', 'value2', 'value3')
$sq->where('column', 'NOT IN', array('value1', 'value2', 'value3'));

// WHERE `column` BETWEEN 'value1' AND 'value2'
// WHERE `example` BETWEEN 10 AND 100
$sq->where('column', 'BETWEEN', array('value1', 'value2'));

It should be noted that OR and parenthesis are not supported and implemented in the SphinxQL dialect yet.

MATCH

$sq->match($column, $value, $half = false)

Search in full-text fields. Can be used multiple times in the same query. Column can be an array. Value can be an Expression to bypass escaping (and use your own custom solution).

<?php
$sq->match('title', 'Otoshimono')
    ->match('character', 'Nymph')
    ->match(array('hates', 'despises'), 'Oregano');

By default, all inputs are escaped. The usage of SphinxQL::expr($value) is required to bypass the default escaping and quoting function.

The $half argument, if set to true, will not escape and allow the usage of the following characters: -, |, ". If you plan to use this feature and expose it to public interfaces, it is recommended that you wrap the query in a try catch block as the character order may throw a query error.

<?php
use Foolz\SphinxQL\SphinxQL;

try
{
    $result = (new SphinxQL($conn))
        ->select()
        ->from('rt')
        ->match('title', 'Sora no || Otoshimono', true)
        ->match('title', SphinxQL::expr('"Otoshimono"/3'))
        ->match('loves', SphinxQL::expr(custom_escaping_fn('(you | me)')));
        ->execute();
}
catch (\Foolz\SphinxQL\DatabaseException $e)
{
    // an error is thrown because two `|` one after the other aren't allowed
}

GROUP, WITHIN GROUP, ORDER, OFFSET, LIMIT, OPTION

$sq->groupBy($column)

GROUP BY $column

$sq->withinGroupOrderBy($column, $direction = null)

WITHIN GROUP ORDER BY $column [$direction]

Direction can be omitted with null, or be ASC or DESC case insensitive.

$sq->orderBy($column, $direction = null)

ORDER BY $column [$direction]

Direction can be omitted with null, or be ASC or DESC case insensitive.

$sq->offset($offset)

LIMIT $offset, 9999999999999

Set the offset. Since SphinxQL doesn't support the OFFSET keyword, LIMIT has been set at an extremely high number.

$sq->limit($limit)

LIMIT $limit

$sq->limit($offset, $limit)

LIMIT $offset, $limit

$sq->option($name, $value)

OPTION $name = $value

Set a SphinxQL option such as max_matches or reverse_scan for the query.

TRANSACTION

(new SphinxQL($conn))->transactionBegin()

Begins a transaction.

(new SphinxQL($conn))->transactionCommit()

Commits a transaction.

(new SphinxQL($conn))->transactionRollback()

Rollbacks a transaction.

Executing and Compiling

$sq->execute()

Compiles, executes, and returns a ResultSet object containing the query results.

$sq->executeBatch()

Compiles, executes, and returns a MultiResultSet object containing the multi-query results.

$sq->compile()

Compiles the query.

$sq->getCompiled()

Returns the last query compiled.

$sq->getResult()

Returns the ResultSet or MultiResultSet object, depending on whether single or multi-query have been executed last.

Multi-Query

$sq->enqueue(SphinxQL $next = null)

Queues the query. If a $next is provided, $next is appended and returned, otherwise a new SphinxQL object is returned.

$sq->executeBatch()

Returns a MultiResultSet object containing the multi-query results.

<?php
use Foolz\SphinxQL\SphinxQL;

$result = (new SphinxQL($this->conn))
    ->select()
    ->from('rt')
    ->match('title', 'sora')
    ->enqueue((new SphinxQL($this->conn))->query('SHOW META')) // this returns the object with SHOW META query
    ->enqueue() // this returns a new object
    ->select()
    ->from('rt')
    ->match('content', 'nymph')
    ->executeBatch();

$result will contain MultiResultSet object. Sequential calls to the $result->getNext() method allow you to get a ResultSet object containing the results of the next enqueued query.

Query results

ResultSet

Contains the results of the query execution.

$result->fetchAllAssoc()

Fetches all result rows as an associative array.

$result->fetchAllNum()

Fetches all result rows as a numeric array.

$result->fetchAssoc()

Fetch a result row as an associative array.

$result->fetchNum()

Fetch a result row as a numeric array.

$result->getAffectedRows()

Returns the number of affected rows in the case of a DML query.

MultiResultSet

Contains the results of the multi-query execution.

$result->getNext()

Returns a ResultSet object containing the results of the next query.

Helper

The Helper class contains useful methods that don't need "query building".

Remember to ->execute() to get a result.

Helper::pairsToAssoc($result)

Takes the pairs from a SHOW command and returns an associative array key=>value

The following methods return a prepared SphinxQL object. You can also use ->enqueue($next_object):

<?php
use Foolz\SphinxQL\SphinxQL;

$result = (new SphinxQL($this->conn))
    ->select()
    ->from('rt')
    ->where('gid', 9003)
    ->enqueue((new Helper($this->conn))->showMeta()) // this returns the object with SHOW META query prepared
    ->enqueue() // this returns a new object
    ->select()
    ->from('rt')
    ->where('gid', 201)
    ->executeBatch();

• (new Helper($conn))->showMeta() => 'SHOW META'
• (new Helper($conn))->showWarnings() => 'SHOW WARNINGS'
• (new Helper($conn))->showStatus() => 'SHOW STATUS'
• (new Helper($conn))->showTables() => 'SHOW TABLES'
• (new Helper($conn))->showVariables() => 'SHOW VARIABLES'
• (new Helper($conn))->setVariable($name, $value, $global = false)
• (new Helper($conn))->callSnippets($data, $index, $query, $options = array())
• (new Helper($conn))->callKeywords($text, $index, $hits = null)
• (new Helper($conn))->describe($index)
• (new Helper($conn))->createFunction($udf_name, $returns, $soname)
• (new Helper($conn))->dropFunction($udf_name)
• (new Helper($conn))->attachIndex($disk_index, $rt_index)
• (new Helper($conn))->flushRtIndex($index)
• (new Helper($conn))->optimizeIndex($index)
• (new Helper($conn))->showIndexStatus($index)
• (new Helper($conn))->flushRamchunk($index)

Percolate

The Percolate class provides methods for the "Percolate query" feature of Manticore Search. For more information about percolate queries refer the Percolate Query documentation.

INSERT

The Percolate class provide a dedicated helper for inserting queries in a percolate index.

<?php
use Foolz\SphinxQL\Percolate;

$query = (new Percolate($conn))
     ->insert('full text query terms',false)      
     ->into('pq')                                              
     ->tags(['tag1','tag2'])                                  
     ->filter('price>3')                                      
     ->execute();

$pq = (new Percolate($conn))->insert($query,$noEscape)

Begins an INSERT. A single query is allowed to be added per insert. By default, the query string is escaped. Optional second parameter $noEscape can be set to true for not applying the escape.

$pq->into($index)

Set the percolate index for insert.

$pq->tags($tags)

Set a list of tags per query. Accepts array of strings or string delimited by comma

$pq->filter($filter) Sets an attribute filtering string. The string must look the same as string of an WHERE attribute filters clause

$pq->execute()

Execute the INSERT.

CALLPQ

Searches for stored queries that provide matching for input documents.

<?php
use Foolz\SphinxQL\Percolate;
$query = (new Percolate($conn))
     ->callPQ()
     ->from('pq')                                              
     ->documents(['multiple documents', 'go this way'])        
     ->options([                                               
           Percolate::OPTION_VERBOSE => 1,
           Percolate::OPTION_DOCS_JSON => 1
     ])
     ->execute();

$pq = (new Percolate($conn))->callPQ()

Begins a CALL PQ

$pq->from($index)

Set percolate index.

$pq->documents($docs)

Set the incoming documents. $docs can be:

• a single plain string (requires Percolate::OPTION_DOCS_JSON set to 0)
• array of plain strings (requires Percolate::OPTION_DOCS_JSON set to 0)
• a single JSON document
• an array of JSON documents
• a JSON object containing an array of JSON objects

$pq->options($options)

Set options of CALL PQ. Refer the Manticore docs for more information about the CALL PQ parameters.

• Percolate::OPTION_DOCS_JSON (as docs_json) default to 1 (docs are json objects). Needs to be set to 0 for plain string documents. Documents added as associative arrays will be converted to JSON when sending the query to Manticore.
• Percolate::OPTION_VERBOSE (as verbose) more information is printed by following SHOW META, default is 0
• Percolate::OPTION_QUERY (as query) returns all stored queries fields , default is 0
• Percolate::OPTION_DOCS (as docs) provide result set as per document matched (instead of per query), default is 0

$pq->execute()

Execute the CALL PQ.

Laravel

Laravel's dependency injection and realtime facades brings more convenience to SphinxQL Query Builder usage.

// Register connection:
use Foolz\SphinxQL\Drivers\ConnectionInterface;
use Foolz\SphinxQL\Drivers\Mysqli\Connection;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function register()
    {
        $this->app->singleton(ConnectionInterface::class, function ($app) {
            $conn = new Connection();
            $conn->setParams(['host' => 'domain.tld', 'port' => 9306]);
            return $conn;
        });
    }
}

// In another file:
use Facades\Foolz\SphinxQL\SphinxQL;

$result = SphinxQL::select('column_one', 'colume_two')
    ->from('index_ancient', 'index_main', 'index_delta')
    ->match('comment', 'my opinion is superior to yours')
    ->where('banned', '=', 1)
    ->execute();

 

Facade access also works with Helper and Percolate.

Author: FoolCode
Source Code: https://github.com/FoolCode/SphinxQL-Query-Builder

#php 

What is GEEK

Buddha Community

Search Emails From A Domain Through Search Engines for Python

EmailFinder

Search emails from a domain through search engines for python

Installation:

> pip3 install emailfinder

Upgrades are also available using:

> pip3 install emailfinder --upgrade

Search Engines

• google: Ok (note cookies policy and Captcha!).
• bing: OK.
• baidu: OK (few requests).
• bing: Hunting Robots very fast.
  …

#email #python #search emails #search emails through search engines #search emails from a domain through search engines for python #domain

How model queries work in Django

How model queries work in Django

Welcome to my blog, hey everyone in this article we are going to be working with queries in Django so for any web app that you build your going to want to write a query so you can retrieve information from your database so in this article I’ll be showing you all the different ways that you can write queries and it should cover about 90% of the cases that you’ll have when you’re writing your code the other 10% depend on your specific use case you may have to get more complicated but for the most part what I cover in this article should be able to help you so let’s start with the model that I have I’ve already created it.

**Read More : **How to make Chatbot in Python.

Read More : Django Admin Full Customization step by step

let’s just get into this diagram that I made so in here:

Describe each parameter in Django querset

we’re making a simple query for the myModel table so we want to pull out all the information in the database so we have this variable which is gonna hold a return value and we have our myModel models so this is simply the myModel model name so whatever you named your model just make sure you specify that and we’re gonna access the objects attribute once we get that object’s attribute we can simply use the all method and this will return all the information in the database so we’re gonna start with all and then we will go into getting single items filtering that data and go to our command prompt.

Here and we’ll actually start making our queries from here to do this let’s just go ahead and run** Python manage.py shell** and I am in my project file so make sure you’re in there when you start and what this does is it gives us an interactive shell to actually start working with our data so this is a lot like the Python shell but because we did manage.py it allows us to do things a Django way and actually query our database now open up the command prompt and let’s go ahead and start making our first queries.

#django #django model queries #django orm #django queries #django query #model django query #model query #query with django

Laravel 7 Full Text Search MySQL

Here, I will show you how to create full text search in laravel app. You just follow the below easy steps and create full text search with mysql db in laravel.

Laravel 7 Full Text Search Mysql

Let’s start laravel full-text search implementation in laravel 7, 6 versions:

1. Step 1: Install Laravel New App
2. Step 2: Configuration DB .evn file
3. Step 3: Run Migration
4. Step 4: Install Full Text Search Package
5. Step 5: Add Fake Records in DB
6. Step 6: Add Routes,
7. Step 7: Create Controller
8. Step 8: Create Blade View
9. Step 9: Start Development Server

https://www.tutsmake.com/laravel-full-text-search-tutorial/

#laravel full text search mysql #laravel full text search query #mysql full text search in laravel #full text search in laravel 6 #full text search in laravel 7 #using full text search in laravel

Search Engine Optimization Software & Tools in 2020 (SEO)

**### Search Engine Optimization Software & Tools in 2020
**
Search engine optimization software is an online platform that plays a vital role in optimizing your website for Google or other search engines. Because search engine optimization software analyzes all the data you can monitor, including keyword rankings, trending topics, backlinks and even the speed of your website. Which gives you a special role in search engine optimization.
https://www.mrdeluofficial.com/2020/08/search-engine-optimization-software.html

#search engine optimization software #semrush #seo #search #engine #software

Créez des filtres de recherche et de produits à l'aide de Javascript

Bienvenue dans le tutoriel d'aujourd'hui. Dans le didacticiel d'aujourd'hui, nous allons apprendre à créer des filtres et à rechercher des produits. Pour créer ce projet, nous avons besoin de HTML, CSS et Javascript. Comme il s'agit d'un projet assez avancé, je ne le recommanderais pas à un débutant en javascript. Si vous êtes un intermédiaire ou un expert en javascript, vous pouvez certainement aller de l'avant et créer celui-ci.

Ayons un aperçu de ce qu'est réellement ce projet. Le projet comprend une série de fiches produits. Chacune de ces cartes a un nom, un prix et une catégorie qui leur sont attribués. Au-dessus de ces balises, il y a une barre de recherche où les utilisateurs peuvent rechercher un produit en fonction de son nom.

Sous la barre de recherche, il y a un groupe de boutons. Chacun de ces boutons a un nom de catégorie. Lorsque l'utilisateur clique sur l'un de ces boutons, les produits correspondant à cette catégorie particulière seront affichés.

Structure du dossier du projet :

Maintenant, créons d'abord la structure du répertoire du projet afin que nous puissions commencer à coder. Nous commençons par créer un dossier de projet nommé - « Filtres et recherche de produits ». Dans ce dossier, nous créons trois fichiers. Le premier est index.html, le second est style.csset le troisième est script.js. Ces fichiers sont respectivement des documents HTML, des feuilles de style et des fichiers de script.

HTML :

Nous commençons par le code HTML. Tout d'abord, copiez le code ci-dessous et collez-le dans votre fichier HTML.

<!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>

CSS :

Ensuite, pour ajouter des styles à ce projet, nous utilisons CSS. Copiez maintenant le code ci-dessous et collez-le dans votre fichier CSS.

* {
  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;
  }
}

Javascript :

Enfin, nous devons ajouter des fonctionnalités au filtre et également implémenter la fonction de recherche. Pour que cela fonctionne, nous ajoutons javascript. Copiez le code ci-dessous et collez-le dans votre fichier javascript.

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");
};

Votre recherche de produits et votre filtre sont maintenant prêts. J'espère que vous avez apprécié le tutoriel.