Hi, I will provide a free code for all of you on my YouTube channel, in learn Awesome Search Bar with Auto-complete Search Suggestions using HTML CSS JS Without Javascript (Free Source Code). The learning is very easy, simple and easy to understand for beginners, good luck, good luck, my advice is don't forget to keep learning and repeat until you can, happy coding. have a nice day friend.
This is my post for the previous one, you just have to learn it properly, and I will provide the latest updates about teaching web design quickly and easily
The best way is to always learn and practice directly, don't get hung up on confusing code, if you enter the wrong code, don't panic
This is the code HTML and CSS you need learn :
1. HTML
<!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>Search</title>
<script src="https://kit.fontawesome.com/
0c13660f55.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="support">
<p class="heading">Go search</p>
<div class="type-input">
<input type="text"
placeholder="Type here ..">
<div class="view-port"></div>
<div class="icon"><i class=
"fas fa-microphone">
</i></div>
</div>
</div>
</div>
<script src="suggestions.js"></script>
<script src="script.js"></script>
</body>
</html>
2. CSS
* {
margin: 0; padding: 0;
font-family: 'poppins';
list-style: none;
text-decoration: none;
outline: none;
box-sizing: border-box;
}
body {
background: #181818;
padding: 0 20px;
}
.support {
margin: 140px auto;
}
.support .heading {
text-align: center;
font-size: 90px;
font-family: 'Product Sans', sans-serif;
padding-bottom: 10px;
color: #fff;
font-weight: bold;
}
.support .type-input {
margin: auto;
position: relative;
background: #fff;
border-radius: 20px;
padding-left: 5px;
width: 50%;
box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
}
.type-input input {
border-radius: 50px;
height: 55px;
width: 100%;
border: none;
padding: 0 60px 0 20px;
font-size: 18px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}
.type-input .icon {
height: 55px;
width: 55px;
line-height: 55px;
position: absolute;
top: 0;
right: 0;
text-align: center;
font-size: 20px;
color: #D2001A;
cursor: pointer;
}
.type-input .view-port {
padding: 0px;
max-height: 280px;
overflow-y: auto;
opacity: 0;
pointer-events: none;
}
.type-input.active .view-port{
padding: 7px 8px;
opacity: 1;
pointer-events: auto;
}
.type-input.active .view-port li {
display: block;
}
.type-input li {
padding: 8px 12px;
width: 100%;
cursor: default;
border-radius: 3px;
display: none;
}
.type-input li:hover {
background: #efefef;
}
3. JAVASCRIPT AND SUGGESTION
const searchSupport = document.
querySelector(".type-input");
const inputBox = searchSupport.
querySelector("input");
const suggBox = searchSupport.
querySelector(".view-port");
const icon = searchSupport.
querySelector(".icon");
let linkTag = searchSupport.
querySelector("a");
// if user press any key and release
inputBox.onkeyup = (e)=>{
let userData = e.target.value; //user enetered data
let emptyArray = [];
if(userData){
emptyArray = suggestions.filter((data)=>{
return data.toLocaleLowerCase()
.startsWith(userData.
toLocaleLowerCase());
});
emptyArray = emptyArray.map((data)=>{
return data = `<li>${data}</li>`;
});
searchSupport.classList.add("active");
showSuggestions(emptyArray);
let allList = suggBox.querySelectorAll("li");
for (let i = 0; i < allList.length; i++) {
allList[i].setAttribute("onclick",
"select(this)");
}
}else{
searchSupport.classList.remove("active");
}
}
function select(element){
let selectData = element.textContent;
inputBox.value = selectData;
icon.onclick = ()=>{
webLink = `https://www.google.com/search?q=$
{selectData}`;
linkTag.setAttribute("href", webLink);
linkTag.click();
}
searchSupport.classList.remove("active");
}
function showSuggestions(list){
let listData;
if(!list.length){
userValue = inputBox.value;
listData = `<li>${userValue}</li>`;
}else{
listData = list.join('');
}
suggBox.innerHTML = listData;
}
let suggestions = [
"Nama aku budi", "Nama aku Yayya",
"Nama aku Udin",
"Shoppee Express Indonesia",
"Short Movie","Hub Panndeglang",
"Channel Yayya","Bos Amsori is the Best",
"Budi is the best",
"Fahri and fais is the best","Jnt cayyo",
"Yanto Kurir terbaik",
"Yaya WebDesign","Yaya.Soen","HTML CSS and Javascript",
"Aulia Nurul J",
"Coding is Easy","Search in Go search",
"What do you think?","Yaya in wikipedia",
"Nama Nama Pahlawan Bangsa Indonesia",
"17 Agustus 1945","THE SPIRIT CARRIES ON",
];
For more details, you can see the link YouTube below :
Support my channel. Comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀
Download ZIP free code : DOWNLOAD NOW
Belum ada tanggapan untuk "Awesome Search Bar with Auto-complete Search Suggestions using HTML CSS JAVASCRIPT"
Post a Comment