HTML、CSS、およびJavaScriptの検索オプションでカスタム選択入力

15894 ワード
html javascript incoder css テキストリンク
こんにちは、今日、このブログでは、HTML、CSS、およびJavaScriptの検索オプションを使用してカスタム選択入力を作成する方法を学びます.前のブログでhow to create a responsive image lightbox design using HTML, CSS, and Vanilla Javascript . 今では検索オプションを使用してカスタムを選択入力を作成する時間です.興味があるならば、あなたはこのブログを読んだ後に私の他のJavaScriptプロジェクトをチェックすることができます.My javascript blogs .
カスタム選択メニューは、ユーザーが定義済みの特定のオプションを選択または選択できるドロップダウンメニューです.このメニューでは、上記のイメージで見ることができるように検索ボックスで選択入力があります.

以下のようにします。

  • Responsive Animated Card Design
  • Random Password Generator
  • Responsive Sidebar Menu Design
  • Analog Clock Desing
    • この選択メニューでは、オプションとして多くの国があり、ユーザーは一度に任意の国を選択することができます.また、オプションからすぐに何かを検索するために使用される検索入力もあります.あなたがデモをチェックしたいならば、あなたは同様にソースコードとデモをチェックすることができます.
    ここをチェックdemo .

    HTMLコード


    <!-- --------------------- Created By InCoder --------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Select Input - InCoder</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
    <div class="customInputContainer">
        <div class="customInput">
            <div class="selectedData">Custom Input</div>
            <i class="fa-solid fa-angle-right"></i>
        </div>
        <div class="options">
            <div class="searchInput">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" id="searchInput" placeholder="Search">
            </div>
            <ul>
            </ul>
        </div>
    </div>    

    <script src="script.js"></script>
</body>
</html>

    CSSコード


    /* --------------------- Created By InCoder --------------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  background-color: rgb(52, 211, 153);
}

.customInputContainer {
  width: 20rem;
  display: flex;
  max-width: 20rem;
  margin-top: 2rem;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.customInputContainer .customInput {
  margin: 0 1rem;
  cursor: pointer;
  user-select: none;
  font-size: 1.16rem;
  justify-content: space-between;
  padding: 0.6rem 1rem 0.6rem 0.6rem;
}

.customInputContainer .customInput i {
  transition: transform 0.3s ease-in-out;
}

.customInputContainer.show .customInput i {
  transform: rotate(90deg);
}

.customInputContainer :is(.customInput, .options) {
  width: 100%;
  display: flex;
  color: #202020;
  background: #fff;
  align-items: center;
  border-radius: 0.3rem;
}

.customInputContainer .options {
  display: none;
  padding: 0.6rem;
  font-size: 1.1rem;
  justify-content: start;
  flex-direction: column;
  margin: 0.8rem 1rem 0rem 1rem;
  transition: background-color 0.1s ease-in-out;
}

.customInputContainer.show .options {
  display: block;
}

.customInputContainer .options :is(.searchInput, ul) {
  width: 100%;
  max-height: 15rem;
  overflow-y: scroll;
  position: relative;
}

.customInputContainer .options ul::-webkit-scrollbar {
  width: 6px;
  position: relative;
}

.customInputContainer .options ul::-webkit-scrollbar-track{
    width: 2px;
    border-radius: .2rem;
    background: rgb(0 0 0 / 10%)
}

.customInputContainer .options ul::-webkit-scrollbar-thumb{
    border-radius: .2rem;
    background: rgb(0 0 0 / 30%);
}

.customInputContainer .options .searchInput {
  display: flex;
  padding: 0 0.4rem;
  overflow-y: auto;
  align-items: center;
  border-radius: 0.4rem;
  color: rgb(0 0 0 / 50%);
  border: 2px solid rgb(0 0 0 / 30%);
}

.customInputContainer .options .searchInput.focus {
  border: 2px solid rgb(52 211 153 / 70%);
}

.customInputContainer .options .searchInput input[type="text"] {
  border: 0;
  width: 100%;
  outline: none;
  height: 2.5rem;
  font-size: 1rem;
  padding: 0 0.4rem;
  border-radius: 0.4rem;
}

.customInputContainer .options .searchInput input[type="text"]::placeholder {
  font-size: 1rem;
  color: rgb(0 0 0 / 50%);
}

.customInputContainer .options ul {
  margin: 0.5rem 0;
}

.customInputContainer .options ul li {
    cursor: pointer;
    list-style: none;
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid rgb(204 204 204 / 50%);
}

.customInputContainer .options ul li.selected {
    background: rgb(52 211 153 / 50%);
}

.customInputContainer .options ul li.selected:hover {
    background: rgb(52 211 153 / 50%);
}

.customInputContainer .options ul li:last-child {
  border: 0;
}

.customInputContainer .options ul li:hover {
  background: rgb(52 211 153 / 20%);
}

    ジャバスクリプトコード


    // --------------------- Created By InCoder ---------------------
let customInput = document.querySelector('.customInput')
selectedData = document.querySelector('.selectedData')
searchInput = document.querySelector('.searchInput input')
ul = document.querySelector('.options ul')
customInputContainer = document.querySelector('.customInputContainer')

window.addEventListener('click', (e) => {
    if (document.querySelector('.searchInput').contains(e.target)) {
        document.querySelector('.searchInput').classList.add('focus')
    } else {
        document.querySelector('.searchInput').classList.remove('focus')
    }
})

var countries = [
    "Custom Input",
    "Afghanistan",
    "Aland Islands",
    "Albania",
    "Algeria",
    "American Samoa",
    "Andorra",
    "Angola",
    "Anguilla",
    "Antarctica",
    "Antigua and Barbuda",
    "Argentina",
    "Armenia",
    "Aruba",
    "Australia",
    "Austria",
    "Azerbaijan",
    "Bahamas",
    "Bahrain",
    "Bangladesh",
    "Barbados",
    "Belarus",
    "Belgium",
    "Belize",
    "Benin",
    "Bermuda",
    "Bhutan",
    "Bolivia",
    "Bonaire, Sint Eustatius and Saba",
    "Bosnia and Herzegovina",
    "Botswana",
    "Bouvet Island",
    "Brazil",
    "British Indian Ocean Territory",
    "Brunei Darussalam",
    "Bulgaria",
    "Burkina Faso",
    "Burundi",
    "Cambodia",
    "Cameroon",
    "Canada",
    "Cape Verde",
    "Cayman Islands",
    "Central African Republic",
    "Chad",
    "Chile",
    "China",
    "Christmas Island",
    "Cocos (Keeling) Islands",
    "Colombia",
    "Comoros",
    "Congo",
    "Congo, Democratic Republic of the Congo",
    "Cook Islands",
    "Costa Rica",
    "Cote D'Ivoire",
    "Croatia",
    "Cuba",
    "Curacao",
    "Cyprus",
    "Czech Republic",
    "Denmark",
    "Djibouti",
    "Dominica",
    "Dominican Republic",
    "Ecuador",
    "Egypt",
    "El Salvador",
    "Equatorial Guinea",
    "Eritrea",
    "Estonia",
    "Ethiopia",
    "Falkland Islands (Malvinas)",
    "Faroe Islands",
    "Fiji",
    "Finland",
    "France",
    "French Guiana",
    "French Polynesia",
    "French Southern Territories",
    "Gabon",
    "Gambia",
    "Georgia",
    "Germany",
    "Ghana",
    "Gibraltar",
    "Greece",
    "Greenland",
    "Grenada",
    "Guadeloupe",
    "Guam",
    "Guatemala",
    "Guernsey",
    "Guinea",
    "Guinea-Bissau",
    "Guyana",
    "Haiti",
    "Heard Island and Mcdonald Islands",
    "Holy See (Vatican City State)",
    "Honduras",
    "Hong Kong",
    "Hungary",
    "Iceland",
    "India",
    "Indonesia",
    "Iran",
    "Iraq",
    "Ireland",
    "Isle of Man",
    "Israel",
    "Italy",
    "Jamaica",
    "Japan",
    "Jersey",
    "Jordan",
    "Kazakhstan",
    "Kenya",
    "Kiribati",
    "Korea, Democratic People's Republic of",
    "Korea, Republic of",
    "Kosovo",
    "Kuwait",
    "Kyrgyzstan",
    "Lao People's Democratic Republic",
    "Latvia",
    "Lebanon",
    "Lesotho",
    "Liberia",
    "Libyan Arab Jamahiriya",
    "Liechtenstein",
    "Lithuania",
    "Luxembourg",
    "Macao",
    "Macedonia, the Former Yugoslav Republic of",
    "Madagascar",
    "Malawi",
    "Malaysia",
    "Maldives",
    "Mali",
    "Malta",
    "Marshall Islands",
    "Martinique",
    "Mauritania",
    "Mauritius",
    "Mayotte",
    "Mexico",
    "Micronesia, Federated States of",
    "Moldova, Republic of",
    "Monaco",
    "Mongolia",
    "Montenegro",
    "Montserrat",
    "Morocco",
    "Mozambique",
    "Myanmar",
    "Namibia",
    "Nauru",
    "Nepal",
    "Netherlands",
    "Netherlands Antilles",
    "New Caledonia",
    "New Zealand",
    "Nicaragua",
    "Niger",
    "Nigeria",
    "Niue",
    "Norfolk Island",
    "Northern Mariana Islands",
    "Norway",
    "Oman",
    "Pakistan",
    "Palau",
    "Palestinian Territory, Occupied",
    "Panama",
    "Papua New Guinea",
    "Paraguay",
    "Peru",
    "Philippines",
    "Pitcairn",
    "Poland",
    "Portugal",
    "Puerto Rico",
    "Qatar",
    "Reunion",
    "Romania",
    "Russian Federation",
    "Rwanda",
    "Saint Barthelemy",
    "Saint Helena",
    "Saint Kitts and Nevis",
    "Saint Lucia",
    "Saint Martin",
    "Saint Pierre and Miquelon",
    "Saint Vincent and the Grenadines",
    "Samoa",
    "San Marino",
    "Sao Tome and Principe",
    "Saudi Arabia",
    "Senegal",
    "Serbia",
    "Serbia and Montenegro",
    "Seychelles",
    "Sierra Leone",
    "Singapore",
    "Sint Maarten",
    "Slovakia",
    "Slovenia",
    "Solomon Islands",
    "Somalia",
    "South Africa",
    "South Georgia and the South Sandwich Islands",
    "South Sudan",
    "Spain",
    "Sri Lanka",
    "Sudan",
    "Suriname",
    "Svalbard and Jan Mayen",
    "Swaziland",
    "Sweden",
    "Switzerland",
    "Syrian Arab Republic",
    "Taiwan, Province of China",
    "Tajikistan",
    "Tanzania, United Republic of",
    "Thailand",
    "Timor-Leste",
    "Togo",
    "Tokelau",
    "Tonga",
    "Trinidad and Tobago",
    "Tunisia",
    "Turkey",
    "Turkmenistan",
    "Turks and Caicos Islands",
    "Tuvalu",
    "Uganda",
    "Ukraine",
    "United Arab Emirates",
    "United Kingdom",
    "United States",
    "United States Minor Outlying Islands",
    "Uruguay",
    "Uzbekistan",
    "Vanuatu",
    "Venezuela",
    "Viet Nam",
    "Virgin Islands, British",
    "Virgin Islands, U.s.",
    "Wallis and Futuna",
    "Western Sahara",
    "Yemen",
    "Zambia",
    "Zimbabwe"
];

customInput.addEventListener('click', () => {
    customInputContainer.classList.toggle('show')
})

let countriesLength = countries.length

for (let i = 0; i < countriesLength; i++) {
    let country = countries[i]
    const li = document.createElement("li");
    const countryName = document.createTextNode(country);
    li.appendChild(countryName);
    ul.appendChild(li);
}


ul.querySelectorAll('li').forEach(li => {
    li.addEventListener('click', (e) => {
        let selectdItem = e.target.innerText
        selectedData.innerText = selectdItem

        for (const li of document.querySelectorAll("li.selected")) {
            li.classList.remove("selected");
        }
        e.target.classList.add('selected')
        customInputContainer.classList.toggle('show')
    })
});

function updateData(data) {
    let selectedCountry = data.innerText
    selectedData.innerText = selectedCountry

    for (const li of document.querySelectorAll("li.selected")) {
        li.classList.remove("selected");
    }
    data.classList.add('selected')
    customInputContainer.classList.toggle('show')
    console.log(selectedCountry);
}

searchInput.addEventListener('keyup', (e) => {
    let searchedVal = searchInput.value.toLowerCase()
    let searched_country = []

    searched_country = countries.filter(data => {
        return data.toLocaleLowerCase().startsWith(searchedVal)
    }).map(data => {
        return `<li onClick="updateData(this)">${data}</li>`
    }).join('')
    ul.innerHTML = searched_country ? searched_country : "<p style='margin-top: 1rem;'>Opps can't find any result <p style='margin-top: .2rem; font-size: .9rem;'>Try searching something else.</p></p>"
})
    SprngMVCのResponseBodyの中国語の文字化けしを解決します
    どのように解決するために“ローダを解決するに失敗しました:SVSローダ”エラーVuejs 3で?