I am trying to implement this search bar into my webpage: https://github.com/jeffersonRibeiro/jquery-simpleSelect but it does not seem to work when I import bootstrap.
I tried to see if I was importing things in incorrectly, but nothing seems to work. The only time the search bar would actually work is if I comment out the bootstrap import
The imports I am using are just from: https://getbootstrap.com/docs/4.0/getting-started/introduction/. Just linking the Bootstrap stylesheet appears to not make it work and I am not sure why. Any ideas?
Here is the html file:
$(document).ready(function(){
$('#segment').simpleSelect();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Simple select with search</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
<link rel="stylesheet" href="simpleSelect.css">
</head>
<body>
<form>
<select id="segment" name="segmentation">
<option data-defaultSelected>Select</option>
<option>JAVASCRIPT</option>
<option>PHP</option>
<option>BRAZIL</option>
<option>CANADA</option>
<option>MEAN</option>
</select>
<!-- <input type="submit"/> -->
</form>
Javascript: https://github.com/jeffersonRibeiro/jquery-simpleSelect/blob/master/src/js/simpleSelect.js
CSS: https://github.com/jeffersonRibeiro/jquery-simpleSelect/blob/master/src/css/simpleSelect.css
The problem occurs when I uncomment the link to the bootstrap stylesheet