I am using a datalist to select a city . I want the first row of the datalist to show the selected city and from the second row I need the search functionality. Currently, the first row is a search row. I want something like this
This is my JsFiddle code
<label class="item">City:</label><input list="cities_list" id = "s_city" name = "s_city" placeholder="search..." type="text" onblur ="setCityName();" class="item">
<datalist id="cities_list" class="item">
<option value="Puerto Rico" date-time-zone="America/Puerto_Rico">
<option value="Chicago" date-time-zone="America/Chicago">
<option value="Antigua" date-time-zone="America/Antigua">
<option value="Amsterdam" date-time-zone="Europe/Amsterdam">
<option value="Istanbul" date-time-zone="Europe/Istanbul">
<option value="London" date-time-zone="Europe/London">
<option value="Rome" date-time-zone="Europe/Rome">
<option value="Bangkok" date-time-zone="Asia/Bangkok">
<option value="Hong_Kong" date-time-zone="Asia/Hong_Kong">
<option value="Jakarta" date-time-zone="Asia/Jakarta">
</datalist>
Is there any Javascript or jQuery function I can use to change the behaviour of the datalist. The first row shows the selected city and the second row will be the searchable. Any suggestions would be appreciated.
Here is an approach without plugin.
function openSearchDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
function closeSearchDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
function selectFilteredValue() {
document.getElementById("search_input").value = event.target.getAttribute("data-value");
closeSearchDropdown();
}
function filterSearchDropdown() {
var input, filter, ul, li, span, i;
input = document.getElementById("search_value");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
span = div.getElementsByTagName("span");
for (i = 0; i < span.length; i++) {
txtValue = span[i].textContent || span[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
span[i].style.display = "";
} else {
span[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
.dropdown .search-area {
box-sizing: border-box;
background-image: url("searchicon.png");
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
.dropdown .search-area:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content span {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown span:hover {
background-color: #ddd;
}
.show {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h2>City</h2>
<div class="dropdown">
<input onclick="openSearchDropdown()" id="search_input" />
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="search_value" onkeyup="filterSearchDropdown()" class="search-area" />
<span data-value="Bangkok" onclick="selectFilteredValue()">Bangkok</span>
<span data-value="Hong_Kong" onclick="selectFilteredValue()">Hong_Kong</span>
<span data-value="Jakarta" onclick="selectFilteredValue()">Jakarta</span>
</div>
</div>
</body>
</html>
Related
I want to know how to make my search bar on my blog website working like amazon or any website have a search bar when you type a letter it shows you things related to the letter you searched for and the things that I mean it is something like a blog or product
Here you go with vanilla JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content li, h4 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown li:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h2>Search/Filter Dropdown</h2>
<div class="dropdown">
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<h4>My List</h4>
<ul>
<li id="product1">Car</li>
<li id="product2">Bicyle</li>
<li id="product3">Motocycle</li>
<li id="product4">Boat</li>
<li id="product5">Lawn Mower</li>
<li id="product6">Trailer</li>
<li id="product7">Power Saw</li>
</ul>
</div>
</div>
<script>
/* Javascript function to search the list*/
function filterFunction() {
let input, filter, ul, li, a, i;
input = document.getElementById("myInput");
/* change everything to lower or upper case in order
to make the search case insensitive */
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
li = div.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
txtValue = li[i].textContent || li[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>
I want the set default value of the select to month. Moreover on load select should show month as text instead of Filter.
How can it be achieved???
any help would do good.
Below is the snippet of the code I have written so far.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: #3498DB;
position: relative;
margin: 0 20px;
color: white;
padding: 3px 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.dropdown:hover .dropdown-content {display: block;}
.show {display:block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Filter </button>
<div id="myDropdown" class="dropdown-content">
Day
Week
Month
</div>
Please let me know how i can achieve this
Try this. You can apply click event on the links and when clicked the value of filter can be set
$(document).ready(function(){
$(".dropbtn").html($(".default").text())
})
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
$("#myDropdown").children('a').click(function(){
$('.dropbtn').html($(this).text())
})
.dropbtn {
background-color: #3498DB;
position: relative;
margin: 0 20px;
color: white;
padding: 3px 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.dropdown:hover .dropdown-content {display: block;}
.show {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Filter </button>
<div id="myDropdown" class="dropdown-content">
Day
Week
Month
</div>
HTML5 makes this more easier by using the select tag.
The selected option will specify which option has to be selected by default when the page loads.
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month" selected >Month</option>
<select>
Instead of that div class you've got. Create a dropdown such as the following.
<select>
<option value="Day">Day</option>
<!--etc-->
</select>
To make a default using this you can simply add the following
<option value="Day" selected="selected">Day</option>
So I am having a little problem. If you look at the code snippet the dropdown is working a little different on the snippet than on my website. On my website you can search and everything works as it should. However when you have opened the dropdown and then click outside I want it to close, but it doesn't. I think it have something to do with the script. Would appreciate help.
function myFunction() {
var dropDown = document.getElementById('myDropdown'),
items = dropDown.children,
height = 0;
dropDown.classList.toggle('show');
for (var i = 1; i < 10; i++) {
height += items[i].offsetHeight;
}
dropDown.style.height = height + 'px';
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
var btn = document.querySelector('.dropbtn');
btn.addEventListener('blur', function() {
var dd = document.querySelector('.dropdown-content');
if ( dd.classList.contains('show') ) {
dd.classList.remove('show');
}
});
.dropbtn {
background-color: #0d0d0d;
color: white;
padding: 18px;
height: 65px;
width: 125px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: white;
color: black;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-family: 'Lato', serif;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">CARS</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
Acura
Alfa Romeo
Aston Martin
Audi
Bentley
BMW
Bugatti
Buick
Cadillac
Chevrolet
Chrysler
Dodge
Ferrari
Fiat
Ford
Gensis
GMC
Honda
Hyundai
Infiniti
Jaguar
Jeep
Kia
Koenigsegg
Lamborghini
Land Rover
Lexus
Lincoln
Lotus
Maserati
Mazda
McLaren
Mercedes-AMG
Mercedes-Benz
Mercedes-Maybach
Mini
Mitsubishi
Nissan
Pagani
Porsche
Ram
Rolls-Royce
Scion
Smart
Spyker
Subaru
Tesla
Toyota
Volkswagen
Volvo
</div>
</div>
Try something like this, with a document event listener for click, and e.stopPropagation() on any menu elements.
Also, why do you have two hrefs for each link?
function myFunction() {
var dropDown = document.getElementById('myDropdown'),
items = dropDown.children,
height = 0;
dropDown.classList.toggle('show');
for (var i = 1; i < 10; i++) {
height += items[i].offsetHeight;
}
dropDown.style.height = height + 'px';
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
var menu = document.querySelector('.dropdown');
menu.addEventListener('click', function(event) {
event.stopPropagation();
});
document.addEventListener('click', function() {
var dd = document.querySelector('.dropdown-content');
if (dd.classList.contains('show')) {
dd.classList.remove('show');
}
})
.dropbtn {
background-color: #0d0d0d;
color: white;
padding: 18px;
height: 65px;
width: 125px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: white;
color: black;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-family: 'Lato', serif;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">CARS</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
Acura
Alfa Romeo
Aston Martin
Audi
Bentley
BMW
Bugatti
Buick
Cadillac
Chevrolet
Chrysler
Dodge
Ferrari
Fiat
Ford
Gensis
GMC
Honda
Hyundai
Infiniti
Jaguar
Jeep
Kia
Koenigsegg
Lamborghini
Land Rover
Lexus
Lincoln
Lotus
Maserati
Mazda
McLaren
Mercedes-AMG
Mercedes-Benz
Mercedes-Maybach
Mini
Mitsubishi
Nissan
Pagani
Porsche
Ram
Rolls-Royce
Scion
Smart
Spyker
Subaru
Tesla
Toyota
Volkswagen
Volvo
</div>
</div>
I am trying to make a DROPDOWN list from this tutorial. The functions seem to work very good, but it doesnt get the CSS.
this is what it looks.
Since the refreshes the page when its pressed. I tried to add it as a but still the same problem, the CSS does not get implemented.
any suggestion?
this is the snipped code:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
Whats the problem here? I cant figure it out.
Maybe problem of css in separate file, that in line
.dropdown a:hover
after background-color property value missing semicolon?
I have a select field where a large amount of published names, could reach hundreds.
What I need is to filter the field, I mean:
That if one was selected and searched, displayed as sample texts for forms and with the possibility of writing a new search deleting the sample text searched before.
That fence as typing the text in the box will display the filtered list of options for the text.
An example would be: if I type D or d in the text box, it displays the list of options Daniel Diego, so for all, and that if you search with Diego then after loading the search text box appears as example Diego.
<select id="id_name" name="name">
<option value="3">Diego </option>
<option value="4">Daniel </option>
<option value="5">Fernando </option>
<option value="6">Luz </option>
<option value="7">Catherine </option>
<option value="8">Samuel </option>
<option value="10">Eduardo </option>
</select>
Try this.
Chosen is a jQuery plugin for the <select> html tag.
Not only does it make your select boxes look nicer, but it adds a very nice search feature at the top of the select box.
The source/demo is found here: https://harvesthq.github.io/chosen/
If you want to go with jQuery then these are great UI options available :
https://select2.org/dropdown
https://jqueryui.com/selectmenu/
https://harvesthq.github.io/chosen/
If you want to use Vanilla JavaScript (without jQuery). This is the best option.
You can customise the colours and button layout as per your choice.
More info
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<!DOCTYPE html>
<h2>Basic Select Search/Filter Dropdown</h2>
<p>
Click to open the dropdown menu, and use the input field to search for a specific dropdown link.
</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Select Here</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
I guess this exactly what you're looking for
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The search field */
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>