Flex Element Select

'flex-element-select' provides functional logic and structure for select in web applications.

• Can make Api requests with embedded Axios.
• It allows you to process data externally.
• It provides multiple selection opportunities and allows you to set selection limits.
• It allows you to make a selection on the first installation.
• Allows you to search through loaded data.
• It works efficiently with little code.
• Allows you to get output with response In short, it provides you with everything you want to do in a select process. Of course, this is just the beginning. It will be updated every week until the final result.

Building Features

API->(Get) : OBJECT

It comes embedded in Axios Select. You can use this or a similar URL to make your API requests.

(If you are going to make an API request, remove the data=[] object. It will select the API first and ignore the data object.)

api={{ url: "http://example.com/api.php", parameter: "?limit=10&page=1" }} 

DATA : ARRAY

Data allows you to import an array provided by you.

(If you are going to send data, remove the api={} object. It selects the API first and ignores the data object.)

data={Data}

PARAMETER : ARRAY

parameter is used to determine the placeholders of the data in the select. where the parameters mean;

Html equivalent

<select>
<option value={id}>{title}</option>
</select>

Format

parameter={["id", "title" ]}

RESPONSE : OBJECT

Allows you to get selection printouts. Returns Object in single selection, Array in multiple selection

response={(e) => { console.log(e) }}

Sample Answer Object

{id:1, title:"Example Title 1"}

Sample Answer Array

[{id:1, title:"Example Title 1"},{id:2, title:"Example Title 2"}]

PLACEHOLDER : OBJECT

Placeholder shows users what the input should be used for.

placeholder={{ selectInput: "Select Data", searchInput: "Search Data" }}

selectInput

Default placeholder name of selection field example selectInput:"Select Province"

searchInput

Placeholder value of the search box in Select example searchInput:"Search Province"

SETTINGS : OBJECT

Settings allows you to turn some basic features on/off or set certain limitations.

settings={{ searchbar: true, animation: true, notlogical: true, limit:5 }}

searchbar

Turning on/off the search box in Select

animation

Cancel animations used on Select

notlogical

Ability to cancel the selection and re-select after the selection is made (Only used in Single selection)

limit

It determines the selection limit, for example, you can make 5 selections. (Only used in Multiple selection)

Compilation

Both module structures were used with ESM (ES Modules) and CJS (AMD Require.JS — Async) compilation

Installation

npm install flex-element-select

import { Select } from "flex-element-select";

An example for PHP in the backend

 require_once 'class.config.php'; //Database connection information (may be different for you)
 
 Header("Access-Control-Allow-Origin: *");
 Header("Access-Control-Allow-Headers: Content-Type");
 header('Content-Type: application/json; charset=utf-8');
 header('Access-Control-Allow-Credentials; true');
 try {

 $db = Database::getInstance();
 Database::setCharsetEncoding();

 $limit = $_GET["limit"];
 $start = ($_GET["page"] - 1) * $limit;

 $query = $db->prepare("SELECT * FROM fxe_category LIMIT :start, :limit");
 $query->bindParam(":start", $start, PDO::PARAM_INT);
 $query->bindParam(":limit", $limit, PDO::PARAM_INT);
 $query->execute();
 $data = $query->fetchAll(PDO::FETCH_ASSOC);

 $totalQuery = $db->prepare("SELECT COUNT(*) as total FROM fxe_category");
 $totalQuery->execute();
 $total = $totalQuery->fetch(PDO::FETCH_ASSOC);
 $totalPosts = $total['total'];
 $totalPages = ceil($totalPosts / $limit);

 echo json_encode($data); --> This is how select waits for data via get.

 } catch (PDOException $e) {
 return ["status" => false, "error" => $e->getMessage()];
 }

Exampl Select Example

 <Select
 seleted={12} 
 type="_single_select" 
 response={(e) => { console.log(e) }}
 data={Data}
 api={{ url: "http://example.com/api.php", parameter: "?limit=10&page=1" }} 
 parameter={["id", "title" ]}
 placeholder={{ selectInput: "Select Data", searchInput: "Search Data" }}
 settings={{ 
    searchbar: true, 
    animation: true, 
    notlogical: true 
 }}
 />

Multiple Select Example

 <Select
 seleted={12} 
 type="_multiple_select" 
 response={(e) => { console.log(e) }}
 data={Data}
 api={{ url: "http://example.com/api.php", parameter: "?limit=10&page=1" }} 
 parameter={["id", "title" ]}
 placeholder={{ selectInput: "Select Data", searchInput: "Search Data" }}
 settings={{ 
  searchbar: true, 
  animation: true, 
  limit: 5 
 }}
 />

Other

You can email your support and/or requests regarding the development phase here. Email: [email protected]