search box

├── README.md └── search box ├── img └── arrow-down.svg ├── main.js ├── search-bar-box-smart.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /search box/img/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /search box/main.js: -------------------------------------------------------------------------------- 1 | const selected = document.querySelector(".selected"); 2 | const optionsContainer = document.querySelector(".options-container"); 3 | const searchBox = document.querySelector(".search-box input"); 4 | 5 | const optionsList = document.querySelectorAll(".option"); 6 | 7 | selected.addEventListener("click", () => { 8 | optionsContainer.classList.toggle("active"); 9 | 10 | searchBox.value = ""; 11 | filterList(""); 12 | 13 | if (optionsContainer.classList.contains("active")) { 14 | searchBox.focus(); 15 | } 16 | }); 17 | 18 | optionsList.forEach(o => { 19 | o.addEventListener("click", () => { 20 | selected.innerHTML = o.querySelector("label").innerHTML; 21 | optionsContainer.classList.remove("active"); 22 | }); 23 | }); 24 | 25 | searchBox.addEventListener("keyup", function(e) { 26 | filterList(e.target.value); 27 | }); 28 | 29 | const filterList = searchTerm => { 30 | searchTerm = searchTerm.toLowerCase(); 31 | optionsList.forEach(option => { 32 | let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase(); 33 | if (label.indexOf(searchTerm) != -1) { 34 | option.style.display = "block"; 35 | } else { 36 | option.style.display = "none"; 37 | } 38 | }); 39 | }; 40 | 41 | -------------------------------------------------------------------------------- /search box/search-bar-box-smart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | search box 8 | 9 | 10 | 11 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /search box/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | @font-face { 7 | font-family: 'Shabnam'; 8 | src: url('https://sahand.storage.iran.liara.space/font/Shabnam.woff'); 9 | src: url('https://sahand.storage.iran.liara.space/font/Shabnam.woff') format('embedded-opentype'), 10 | url('https://sahand.storage.iran.liara.space/font/Shabnam.woff') format('woff2'), 11 | url('https://sahand.storage.iran.liara.space/font/Shabnam.woff') format('woff'), 12 | url('https://sahand.storage.iran.liara.space/font/Shabnam.woff') format('truetype'); 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | 17 | body { 18 | font-family: "Shabnam"; 19 | background: #f7f6ff; 20 | } 21 | 22 | h2 { 23 | margin: 16px; 24 | } 25 | 26 | .container { 27 | margin-top: 100px; 28 | padding: 32px; 29 | } 30 | 31 | .select-box { 32 | position: relative; 33 | display: flex; 34 | width: 400px; 35 | flex-direction: column; 36 | } 37 | 38 | .select-box .options-container { 39 | background: #2f3640; 40 | color: #f5f6fa; 41 | max-height: 0; 42 | width: 100%; 43 | opacity: 0; 44 | transition: all 0.4s; 45 | border-radius: 8px; 46 | overflow: hidden; 47 | 48 | order: 1; 49 | } 50 | 51 | .selected { 52 | background: #2f3640; 53 | border-radius: 8px; 54 | margin-bottom: 8px; 55 | color: #f5f6fa; 56 | position: relative; 57 | font-family: "Shabnam"; 58 | order: 0; 59 | } 60 | 61 | .selected::after { 62 | content: ""; 63 | font-family: "Shabnam"; 64 | background: url("img/arrow-down.svg"); 65 | background-size: contain; 66 | background-repeat: no-repeat; 67 | 68 | position: absolute; 69 | height: 100%; 70 | width: 32px; 71 | right: 10px; 72 | top: 5px; 73 | 74 | transition: all 0.4s; 75 | } 76 | 77 | .select-box .options-container.active { 78 | max-height: 240px; 79 | opacity: 1; 80 | overflow-y: scroll; 81 | margin-top: 54px; 82 | } 83 | 84 | .select-box .options-container.active + .selected::after { 85 | transform: rotateX(180deg); 86 | top: -6px; 87 | font-family: "Shabnam"; 88 | } 89 | 90 | .select-box .options-container::-webkit-scrollbar { 91 | width: 8px; 92 | background: rgb(250, 250, 250); 93 | border-radius: 0 8px 8px 0; 94 | } 95 | 96 | .select-box .options-container::-webkit-scrollbar-thumb { 97 | background: #525861; 98 | border-radius: 0 8px 8px 0; 99 | } 100 | 101 | .select-box .option, 102 | .selected { 103 | padding: 12px 24px; 104 | cursor: pointer; 105 | font-family: "Shabnam"; 106 | } 107 | 108 | .select-box .option:hover { 109 | background: rgb(253, 3, 3); 110 | } 111 | 112 | .select-box label { 113 | cursor: pointer; 114 | } 115 | 116 | .select-box .option .radio { 117 | display: none; 118 | } 119 | 120 | a{ 121 | text-decoration: none; 122 | color: white; 123 | } 124 | 125 | 126 | /* Searchbox */ 127 | 128 | .search-box input { 129 | width: 100%; 130 | padding: 12px 16px; 131 | font-family: "Shabnam"; 132 | font-size: 16px; 133 | position: absolute; 134 | border-radius: 8px 8px 0 0; 135 | z-index: 100; 136 | border: 8px solid #2f3640; 137 | font-family: "Shabnam"; 138 | opacity: 0; 139 | pointer-events: none; 140 | transition: all 0.4s; 141 | } 142 | 143 | .search-box input:focus { 144 | outline: none; 145 | font-family: "Shabnam"; 146 | } 147 | 148 | .select-box .options-container.active ~ .search-box input { 149 | opacity: 1; 150 | pointer-events: auto; 151 | font-family: "Shabnam"; 152 | } 153 | --------------------------------------------------------------------------------

مطلب مورد نظرتان را وارد کنید