I have this simple select html field, i am learning JS, I just want to have a autocomplete kind of thing in this field, so when user type it should have this kind of functionality, can It be done?
<html>
<body>
<select>
<option>USA</option>
<option>India</option>
<option>Canada</option>
<option>UK</option>
</select>
</body>
</html>
I have used this library and modified it for my needs. I had modified it to have search clear and custom styling of dropdown. Easy to do. You can also give it a try. https://davidstutz.github.io/bootstrap-multiselect/
Below is the example
<!-- Initialize the plugin: -->
$(document).ready(function() {
$('#example-getting-started').multiselect({
enableFiltering: true,
includeFilterClearBtn: false
});
});
.hide
{
display:none;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.1/js/bootstrap-multiselect.min.js" integrity="sha512-fp+kGodOXYBIPyIXInWgdH2vTMiOfbLC9YqwEHslkUxc8JLI7eBL2UQ8/HbB5YehvynU3gA3klc84rAQcTQvXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<select id="example-getting-started" class="hide">
<option value="usa">USA</option>
<option value="india">India</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
</body>
The previous answer is working fine, but one little more addition to the searchbox is sensiability to lower cas.
so this more accurate code for your issue.
<div class="container my-5">
<select class="mdb-select md-form" searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="3">Poland</option>
<option value="3">Japan</option>
NB: i'm using bootstrap v4
here is also a link to the source code
https://mdbootstrap.com/snippets/jquery/mdbootstrap/921549#html-tab-view
Related
I am using multi select option(pillbox) using select2.
Using the above code just gives me a basic dropdown box .
Q: I am not able to get the search box where the user can type.
Thank you for taking time and looking into my query!
Here is the code.
<html>
<head>
<title>multiple select</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>Multiple select example
<div class="selectRow">
<!-- Using data-placeholder below to set place holder value versus putting in configuration -->
<select id="multipleSelectExample" data-placeholder="Select an option" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
</body>
<script>
$(document).ready(
function () {
$("#multipleSelectExample").select2();
}
);
</script>
Please try the following i think you need to place the jQuery script tag before the select2. And also i think you need to use a more recent version of jQuery.
<html>
<head>
<title>multiple select</title>
<script src="https://code.jquery.com/jquery-3.4.0.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<p>Multiple select example</p>
<div class="selectRow">
<!-- Using data-placeholder below to set place holder value versus putting in configuration-->
<select class="" id="multipleSelectExample" data-placeholder="Select an option" multiple="">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
</body>
<script>
$(document).ready(
function () {
$('#multipleSelectExample').select2();
}
);
</script>
</html>
I want to implement drop-down list with multiple group selection checkbox. There are a lot of options,so I use mysql to save them. How could i get data from mysql to use as option.I want to use php to retrieve data and they must be hierarchical tree structure.
I use this sample code, but option value is directly entered. How to make it display herarchical form as image below.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-
typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
multiselect/0.9.13/css/bootstrap-multiselect.css" />
</head>
<body>
<div class="container" style="width:400px;">
<form method="post" id="framework_form">
<div class="form-group">
<label>Select which Framework you have knowledge</label>
<select id="framework" name="framework[]" multiple class="form-control">
<option value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Laravel">Laravel</option>
<option value="YII">YII</option>
<option value="Zend">Zend</option>
<option value="Symfony">Symfony</option>
<option value="Phalcon">Phalcon</option>
<option value="Slim">Slim</option>
</select>
</div>
</form>
<br />
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#framework').multiselect({
nonSelectedText: 'Thêm khách mời',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth: '400px'
});
});
</script>
Sorry for my bad English and Thanks for reading.
<select class="selectpicker form-control" data-live-search="true" name = "name1" id ="id1">
<option>Option1</option>
<option>Option1</option>
<option>Option1</option>
<option>Option1</option>
</select>
How to trigger an alert on clicking bootstrap select live search input box ?
I tried with this, but its not working.
$(this).closest('.bootstrap-select').find('.bs-searchbox input').on('click',function(){
alert("live searching ..");
})
Any suggestions would be appreciated.
Thanks in advance.
Here is probably the correct Solution (probably):
Since the select-Tag is replace later(after the onload Event), so to be on the save side, so that it can be found "better" with a timeout.
I replace the alert call to a config.info call.
setTimeout(function(){
var newBox = $("#selectControl").get(0).parentNode;
$(newBox).find("input").on("click",function(){
console.info("live searching ..");
});
}, 1000);
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/base.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/css/custom.css">
<link rel="stylesheet" href="https://silviomoreto.github.io/bootstrap-select/dist/css/bootstrap-select.min.css">
<div class="container">
<div>
<select class="selectpicker" data-live-search="true" id="selectControl">
<option data-tokens="Option 1">Option 1</option>
<option data-tokens="Option 2">Option 2</option>
<option data-tokens="Option 3">Option 3</option>
<option data-tokens="Option 4">Option 4</option>
</select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js" >
</script>
<script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js" >
</script>
<script src="https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js">
</script>
</body>
btw.: details to te Control can be found in this Github, found it while google-ing
I need to select only 1 option inside a group. I have used multiple-select.js
I should be able to click either
A1 OR A2 OR A3
AND
B1 OR B2 OR B3
I also tried with - thought that it can deselect previous buttons when a new one is clicked as long as all of them have the same name but in vain.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet"/>
</head>
<body>
<select multiple="multiple">
<optgroup label="Group A">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</optgroup>
<optgroup label="Group B">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</optgroup>
</select>
<script>
$('select').multipleSelect(
{
multiple: true,
multipleWidth: 300,
selectAll: false,
width: '100%',
onClick: function(view) {
//;
}
}
);
</script>
</body>
Normally,multiple-select plugin does not support your desired behavior where you can choose only one choice in each optgroup in a single select.However,you can choose only one choice in a single select without optgroup.
So you can use 2 "single row" selects to accomplish your desired functionality.
PS: I have tried to customize the multiple-select behavior enabling you to choose only one radio button in a single optgroup,but the plugin is not flexible enough.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" />
</head>
<body>
<fieldset>
<legend>Choose Group A and B</legend>
<label>Group A</label>
<select multiple="multiple">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</select>
<label>Group B</label>
<select multiple="multiple">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</select>
</fieldset>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<script>
$('select').multipleSelect({
multiple: true,
multipleWidth: 300,
selectAll: false,
width: '100%',
single: true,
onClick: function (view) {
/*
view.label: the text of the checkbox item
view.checked: the checked of the checkbox item
*/
//Uncheck other checkboxes in the group
},
onOptgroupClick: function (view) {
/*
view.label: the text of the optgroup
view.checked: the checked of the optgroup
view.children: an array of the checkboxes (DOM elements) inside the optgroup
*/
}
});
</script>
</body>
</html>
Hope it can help you.
For the sake of space in a form ,use bootstrap inline form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple select to function like radio in a group</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class="container">
<form class="form-inline">
<fieldset>
<legend>Choose Group A and B</legend>
<label>Group A </label>
<select class="form-control">
<option value="1">Radio A1</option>
<option value="2">Radio A2</option>
<option value="3">Radio A3</option>
</select>
<label>Group B </label>
<select class="form-control">
<option value="4">Radio B1</option>
<option value="5">Radio B2</option>
<option value="6">Radio B3</option>
</select>
</fieldset>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
My code
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="../../assets/jquery-bar-rating121/dist/themes/fontawesome-stars.css">
<select id="example">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"> </script>
<script src="../../assets/jquery-bar-rating121/dist/jquery.barrating.min.js"></script>
jquery :
$('#example').barrating({
theme: 'fontawesome-stars'
});
The stars arent showing, its only showing option selection dropdown. Jquery and jquery.barrating.min.js already included, fontawesome-stars.css also already included at the top, no error. Anything wrong with the code? why arent the stars displaying?
Do I only need these 2 files jquery.barrating.min.js and fontawesome-stars.css for this plugin to work?
Make sure you load the scripts and CSS in the following order. This is the bare minimum files needed to make it work.
Do I only need these 2 files jquery.barrating.min.js and fontawesome-stars.css for this plugin to work?
Yes, along with it, you need to have font-awesome.css and jquery.js. Also, finally, don't forget to use the $(function () { }) to execute the code after the document is ready.
Works for me:
$(function() {
$('#example').barrating({
theme: 'fontawesome-stars'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<script src="http://antenna.io/demo/jquery-bar-rating/jquery.barrating.js"></script>
<link href="http://antenna.io/demo/jquery-bar-rating/dist/themes/fontawesome-stars.css" rel="stylesheet"/>
<select id="example">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>