I want to use bs input tag for a select box in which options are ing from the database. When I type some letter or word in the input it needs to filter from options... I need to select multiple options with remove.
please help me
My dropdown code
<select class="form-control required" name="cpt_codes" id="cpt_codes">
<?php
for ($i=0; $i < count($cpt); $i++) {
if($cpt[$i]['cpt_code']==$result['patient'][0]['cpt_code']){ ?>
<option value="<?php echo $cpt[$i]['cpt_code'];?>" selected>
<?php echo $cpt[$i]['cpt_code'];?>
</option>
<?php } else{ ?>
<option value="<?php echo $cpt[$i]['cpt_code'];?>">
<?php echo $cpt[$i]['cpt_code'];?>
</option>
<?php } ?>
<?php }?>
</select>
I want to use bs input tag for a select box in which options are ing from the database. When I type some letter or word in the input it needs to filter from options... I need to select multiple options with remove.
please help me
My dropdown code
<select class="form-control required" name="cpt_codes" id="cpt_codes">
<?php
for ($i=0; $i < count($cpt); $i++) {
if($cpt[$i]['cpt_code']==$result['patient'][0]['cpt_code']){ ?>
<option value="<?php echo $cpt[$i]['cpt_code'];?>" selected>
<?php echo $cpt[$i]['cpt_code'];?>
</option>
<?php } else{ ?>
<option value="<?php echo $cpt[$i]['cpt_code'];?>">
<?php echo $cpt[$i]['cpt_code'];?>
</option>
<?php } ?>
<?php }?>
</select>
- 1 Have you try jquery select2 plugin ever ? – er-sho Commented Jul 25, 2018 at 10:23
- no,I have not tried jquery plugin – Madhuri Commented Jul 25, 2018 at 10:24
2 Answers
Reset to default 3This is a sample of jquery select2 plugin that demonstrate that you can select tag from data or type any other that not exist in data.
If you want data to be es from any url then you have to use ajax call inside select2 option.
You can refer more sample of select2 from here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/select2/4.0.5/css/select2.min.css" />
</head>
<body>
<select class="form-control select2" multiple="multiple" style="width: 100%;"></select>
<script src="https://code.jquery./jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<script>
$('.select2').select2({
data: ["Piano", "Flute", "Guitar", "Drums", "Photography"],
tags: true,
maximumSelectionLength: 10,
tokenSeparators: [',', ' '],
placeholder: "Select or type keywords",
//minimumInputLength: 1,
//ajax: {
// url: "you url to data",
// dataType: 'json',
// quietMillis: 250,
// data: function (term, page) {
// return {
// q: term, // search term
// };
// },
// results: function (data, page) {
// return { results: data.items };
// },
// cache: true
// }
});
</script>
</body>
</html>{<!-- Created by Oc -->}
<select class="form-control required" name="cpt_codes">
<?php
for ($i=0; < count($cpt); $i++) {
if($cpt[$i]['cpt_code']==$result['patient'][0]['cpt_code']){ ?>
<option value="<?php echo $cpt[$i]['cpt_code'];?>" selected>
<?php echo $cpt[$i]['cpt_code'];?>
</option>
<?php } else ?>
</option>
<?php } ?>
<?php }?>
</select>