From 3eaefaab204b4f39181d9f2fa5ddc131e698605c Mon Sep 17 00:00:00 2001
From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com>
Date: Mon, 14 Nov 2022 13:22:06 +0300
Subject: [PATCH 1/8] Update package.json

---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 8c21747..8d4ba23 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/MaxOvs19/Cg-select.git"
+    "url": "git+https://github.com/MaxOvs19/cg-select.git"
   },
-  "author": "",
+  "author": "MaxOvs19",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/MaxOvs19/Cg-select/issues"
+    "url": "https://github.com/MaxOvs19/cg-select/issues"
   },
-  "homepage": "https://github.com/MaxOvs19/Cg-select",
+  "homepage": "https://maxovs19.github.io/cg-select",
   "devDependencies": {
     "@parcel/transformer-sass": "^2.7.0",
     "parcel": "^2.7.0",

From 4887f52f312521aa6f303b270d9167751dd39235 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com>
Date: Mon, 14 Nov 2022 13:37:18 +0300
Subject: [PATCH 2/8] Added link in git hub page

---
 README.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index b85db09..20d0fbc 100644
--- a/README.md
+++ b/README.md
@@ -61,15 +61,17 @@ const dropdown = new DropDown({
   ],
 });
 ```
-
-#### Примеры разных селектов
+## Пример разных селектов 
+Так же рабочий пример -- https://maxovs19.github.io/cg-select/
 
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png)
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/MultiSelect.png)
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png)
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
 
-Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Чтобы просмотреть его, откройте файл index.html в браузере из папки с документацией.
+Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Чтобы просмотреть его, откройте файл index.html в браузере из папки с документац
+
+
 
 ## Contributing
 

From f601599a43ec5b98f0f120dfe1375174d5aba7cb Mon Sep 17 00:00:00 2001
From: MaxOvs <rock_maksimus@mail.ru>
Date: Mon, 14 Nov 2022 18:46:01 +0300
Subject: [PATCH 3/8] Fixed media requests

---
 package.json               |  8 ++++----
 src/cg-dropdown.js         |  3 +++
 src/style/main.scss        | 18 +++++++++++++++++-
 src/style/nativSelect.scss |  3 ++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 8c21747..57d9ebc 100644
--- a/package.json
+++ b/package.json
@@ -3,21 +3,21 @@
   "version": "0.0.1",
   "description": "",
   "scripts": {
-    "start": "parcel ./src/index.html -p 4500 --open ",
+    "start": "parcel src/index.html -p 4500 --open ",
     "build": "parcel build ./src/index.html  --public-url /cg-select/",
     "deploy": "gh-pages -d dist",
     "predeploy": "npm run build"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/MaxOvs19/Cg-select.git"
+    "url": "git+https://github.com/MaxOvs19/cg-select.git"
   },
   "author": "",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/MaxOvs19/Cg-select/issues"
+    "url": "https://github.com/MaxOvs19/cg-select/issues"
   },
-  "homepage": "https://github.com/MaxOvs19/Cg-select",
+  "homepage": "https://github.com/MaxOvs19/cg-select",
   "devDependencies": {
     "@parcel/transformer-sass": "^2.7.0",
     "parcel": "^2.7.0",
diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index bc939e0..0043569 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -217,11 +217,14 @@ export class DropDown {
     }
 
     const select = this.#element.querySelector('.cg-select');
+    const nativSelect = this.#element.querySelector('.nativSelect');
     if (value === true) {
       this.#element.setAttribute('disabled', true);
+      nativSelect.setAttribute('disabled', true);
       select.classList.add('disabled');
     } else {
       this.#element.removeAttribute('disabled');
+      nativSelect.removeAttribute('disabled');
       select.classList.remove('disabled');
     }
   }
diff --git a/src/style/main.scss b/src/style/main.scss
index 7e5fb9b..cf366fa 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -322,7 +322,23 @@ input[type='checkbox'] {
   display: none;
 }
 
-@media (max-width: 425px) {
+/*320px - 576px*/
+@media (max-width: 576px) {
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  .container {
+    width: 90%;
+
+    .header {
+      h1 {
+        font-size: 32px;
+      }
+    }
+  }
+
   .list {
     display: none !important;
   }
diff --git a/src/style/nativSelect.scss b/src/style/nativSelect.scss
index cbdd06e..c8d4b8b 100644
--- a/src/style/nativSelect.scss
+++ b/src/style/nativSelect.scss
@@ -18,7 +18,7 @@
   }
 }
 
-@media (max-width: 425px) {
+@media (max-width: 576px) {
   .nativSelect {
     display: block;
     min-width: 235px;
@@ -27,6 +27,7 @@
     border: none;
     border-radius: 10px;
   }
+
   select[multiple='multiple'] {
     color: black;
     background-color: white;

From 68273b2fa2a4fe16a866e845380011104487bc3b Mon Sep 17 00:00:00 2001
From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com>
Date: Mon, 14 Nov 2022 18:53:02 +0300
Subject: [PATCH 4/8] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 57d9ebc..c72db6f 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   "bugs": {
     "url": "https://github.com/MaxOvs19/cg-select/issues"
   },
-  "homepage": "https://github.com/MaxOvs19/cg-select",
+  "homepage": "https://maxovs19.github.io/cg-select",
   "devDependencies": {
     "@parcel/transformer-sass": "^2.7.0",
     "parcel": "^2.7.0",

From 734b2b9d564468e440d0b65a12210c0327bba993 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com>
Date: Tue, 15 Nov 2022 14:28:59 +0300
Subject: [PATCH 5/8] Update index.js

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 1a6d21a..1c7451f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -38,7 +38,7 @@ const dropdown = new DropDown({
 const dropdown3 = new DropDown({
   selector: '.cg-dropdown_three',
   placeholder: 'URL',
-  url: 'http://jsonplaceholder.typicode.com/users',
+  url: 'https://jsonplaceholder.typicode.com/users',
   searchMode: true,
   darkTheme: false,
   lenguage: 'ru',

From 3160b3d14bb2f830e2871877129c7e4c855eca67 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com>
Date: Tue, 15 Nov 2022 17:41:08 +0300
Subject: [PATCH 6/8] Update cg-dropdown.js

---
 src/cg-dropdown.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index 0043569..5ad7e7f 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -757,16 +757,21 @@ export class DropDown {
 
     input.oninput = function () {
       let val = this.value.trim();
+      let anyMatch = false;
 
       if (val != '') {
         searchSelect.forEach((elem) => {
+          let isMatching = new RegExp(val, 'gi').test(elem.textContent);
+          anyMatch = anyMatch || isMatching;
+
           if (elem.innerText.search(val) == -1) {
             elem.classList.add('displayHide');
-            result.classList.remove('displayHide');
           } else {
             elem.classList.remove('displayHide');
           }
         });
+
+        result.classList.toggle('displayHide', anyMatch);
       } else {
         searchSelect.forEach((elem) => {
           elem.classList.remove('displayHide');

From 6295b10c6d725f38ee2fed377287202b513abb83 Mon Sep 17 00:00:00 2001
From: MaxOvs <rock_maksimus@mail.ru>
Date: Thu, 17 Nov 2022 21:21:06 +0300
Subject: [PATCH 7/8] Fixed methods search and Exemple page

---
 documentation/index.html   |  4 +++-
 src/cg-dropdown.js         | 13 ++++++------
 src/index.html             | 13 ++++++++++--
 src/index.js               |  7 +++++++
 src/style/ExemplePage.scss | 42 +++++++++++++++++++++++++++++++++-----
 5 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/documentation/index.html b/documentation/index.html
index 806c98f..e9d92a7 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -16,11 +16,13 @@
   <body>
     <div id="main">
       <h1 class="page-title">Home</h1>
+
       <section>
         <h2>CG-SELECT</h2>
+        <a href="../src/index.html">-- Вернуться к примеру --</a>
         <p>
           Этот компонент предлагает более гибкую настройку и использование селекта. Так же
-          реализованны методы взаимодействия с селектом
+          реализованны методы взаимодействия с селектом.
         </p>
 
         <h5>Для создания компонета нужно:</h5>
diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index 5ad7e7f..9bab76a 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -388,6 +388,8 @@ export class DropDown {
    */
   #render(select) {
     const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options;
+    const { list, search } = styles;
+
     const random = Math.random().toString(36).substring(2, 10);
 
     if (select || (select && styles)) {
@@ -409,14 +411,13 @@ export class DropDown {
       } else {
         intputSearch = createInputSearch(random, en.placeholder);
       }
-
+      customStylesFormat(search, intputSearch);
       ulList.appendChild(intputSearch);
     }
 
     ulList.classList.add('list');
 
     if (styles) {
-      const { list } = styles;
       customStylesFormat(list, ulList);
     }
 
@@ -756,15 +757,15 @@ export class DropDown {
     });
 
     input.oninput = function () {
-      let val = this.value.trim();
+      let valueSearch = this.value.trim().toLowerCase();
       let anyMatch = false;
 
-      if (val != '') {
+      if (valueSearch != '') {
         searchSelect.forEach((elem) => {
-          let isMatching = new RegExp(val, 'gi').test(elem.textContent);
+          let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent);
           anyMatch = anyMatch || isMatching;
 
-          if (elem.innerText.search(val) == -1) {
+          if (elem.textContent.toLowerCase().search(valueSearch) == -1) {
             elem.classList.add('displayHide');
           } else {
             elem.classList.remove('displayHide');
diff --git a/src/index.html b/src/index.html
index 60d7b7b..d5d45f0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,8 +10,17 @@
   <body>
     <div class="container">
       <header class="header">
-        <h1>CG-SELECT</h1>
-        <img src="/src/images/logoCG.jpg" alt="#" class="header__logo" />
+        <div class="header__logoBox">
+          <h1>CG-SELECT</h1>
+          <img src="/src/images/logoCG.jpg" alt="#" class="header__logo" />
+        </div>
+        <hr style="width: 55%" />
+        <nav>
+          <ul class="navlist">
+            <li><a href="">Home</a></li>
+            <li><a href="../documentation/index.html">Documentation</a></li>
+          </ul>
+        </nav>
       </header>
     </div>
 
diff --git a/src/index.js b/src/index.js
index 1c7451f..b57cbb2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -130,6 +130,13 @@ const dropdownBtn = new DropDown({
     caret: {
       borderTop: '6px solid black',
     },
+    search: {
+      backgroundColor: '#d7ffff',
+      borderRadius: '5px',
+      borderBottom: 'none',
+      width: '95%',
+      color: 'black',
+    },
   },
   multiselect: true,
 });
diff --git a/src/style/ExemplePage.scss b/src/style/ExemplePage.scss
index 587de21..94b5af5 100644
--- a/src/style/ExemplePage.scss
+++ b/src/style/ExemplePage.scss
@@ -1,10 +1,9 @@
 .header {
   width: 100%;
-  height: 130px;
   border-radius: 5px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  flex-direction: column;
   background-color: #2a2f3b;
   margin-bottom: 8px;
 
@@ -12,13 +11,46 @@
     font-size: 57px;
     color: white;
     font-family: 'Times New Roman', Times, serif;
+    margin: 40px 0 12px 0;
+  }
+
+  &__logoBox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
   }
 
   &__logo {
-    width: 11%;
-    margin-left: 25px;
-    border-radius: 60px;
+    width: 13%;
+    height: 16%;
     border: 1px solid #525252;
+    border-radius: 50%;
+
+    margin: 22px 0 0 29px;
+  }
+
+  .navlist {
+    display: flex;
+    justify-content: space-around;
+    margin: 15px 0 30px 0;
+    padding: 0;
+    width: 230px;
+
+    li {
+      display: inline;
+      list-style: none;
+      text-decoration: none;
+
+      a {
+        color: white;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
   }
 }
 

From 1061d166699e57a909d5dd3d0f7eb8470a1a3a05 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com>
Date: Thu, 17 Nov 2022 21:39:26 +0300
Subject: [PATCH 8/8] Update README.md

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 20d0fbc..70dcf28 100644
--- a/README.md
+++ b/README.md
@@ -69,9 +69,11 @@ const dropdown = new DropDown({
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png)
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
 
-Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Чтобы просмотреть его, откройте файл index.html в браузере из папки с документац
+Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. 
 
 
+**Чтобы ознакомиться с ней, перейдите по ссылке -** https://maxovs19.github.io/cg-select/up_/documentation/index.html
+
 
 ## Contributing