درود
من میخوام یک سرچباکسی درست کنم که با کلیک باز و بسته بشه ولی بلد نیستم چجوری درست کنم!
سورس کد های آماده هم زدم ولی اجرا نشد
میشه راهنمایی کنید؟
سلام روز بخیر
اگه درست متوجه شده باشم کدی که پایین مینویسم به درد میخوره فقط به صورت دست باید آدرسی دهی کنی.
Html:
<form>
<input type="text" placeholder="جستجو...">
</form>
Css:
form input[type="text"] {
padding: 10px;
border: none;
border-bottom: 2px solid #ccc;
font-size: 16px;
outline: none;
width: 200px;
display: none; /* Initially hide the input element */
}
form .search-results {
display: none;
border: 1px solid #ccc;
margin-top: 10px;
padding: 10px;
}
form input[type="text"] {
/*...*/
transition: all 0.3s ease;
}
form input[type="text"].open {
display: block;
}
form .search-results.open {
display: block;
}
Js:
// Get the search input field
var searchInput = document.querySelector("form input[type='text']");
// Get the search button
var searchButton = document.querySelector("form button");
// When the user clicks on the search button, toggle the search input field
searchButton.addEventListener("click", function() {
searchInput.style.display = searchInput.style.display === "none" ? "block" : "none";
});
searchInput.addEventListener("input", function() {
var searchTerm = this.value;
// Do the search
var results = doSearch(searchTerm);
// Show the search results
var searchResults = document.querySelector("form .search-results");
searchResults.innerHTML = results.join("");
searchResults.classList.add("open");
});
function doSearch(searchTerm) {
// Perform the search and return the results
// Here we are returning a simple array of search results
// You can replace this with any kind of real search you want
return [
"<a href='#'>نتیجه ۱</a>",
"<a href='#'>نتیجه ۲</a>",
"<a href='#'>نتیجه ۳</a>"
];
}
سوالی داشتید درخدمتم.
درود خوبی...
سایت کدپن منبع عظیمی از پروژه های آماده وجود دارد:
https://codepen.io/search/pens?q=search+box
دوستان راهنمایی کردن اگه مشکلی وجود داره از ارور توی کنسول عکس بفرستید مشکل مشخص بشه.
به هر اگه میخواید فرانت اند کار کنید باید خودتون Javascript رو حداقل در حد مقدماتی و اونت ها یاد بگیرید چون برای مثال این موردی که میخواید طراحی کنید واقعا چیز ساده ای هست و زحمت زیادی هم نداره
اگه کد های آماده رو تست کردین و جواب نداد این اتفاق به این معنی که مشکل از طرف شماست. برای مثال ممکن کد های آماده مربوطه از کتاب خانه و یا نوع خاصی از کد نویسی(برای مثال Sass) استفاده کرده باشن.
از فایل ها و کنسول مرورگر عکس بفرستید
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟