So I'm having some trouble with integrating the select with search box using bootstrap-select (v1.14.0-beta3) and bootstrap v5.3.1 in react. I looked into a lot of similar questions with the same problem here but none seems to work.
Component.js:
const SecondContactForm = () => {
return (
<select id='sall' className='selectpicker' data-live-search='true'>
<option data-tokens='ketchup mustard'>Hot Dog, Fries and a Soda</option>
<option data-tokens='mustard'>Burger, Shake and a Smile</option>
<option data-tokens='frosting'>Sugar, Spice and all things nice</option>
</select>
);
};
export default SecondContactForm;
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- google font roboto + Poppins: -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap"
rel="stylesheet"
/>
<!-- end google fonts -->
<!-- bootstrap-select: -->
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css"
/>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/i18n/defaults-en_US.min.js"></script>
<!-- end bootstrap-select -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body
data-bs-spy="scroll"
data-bs-target="#navbar-menu"
data-bs-smooth-scroll="true"
tabindex="0"
data-bs-threshold="[0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1]"
>
<div id="root"></div>
<script type="text/javascript">
// $.fn.selectpicker.Constructor.BootstrapVersion = '5.3.1';
$('.selectpicker').selectpicker({ liveSearch: true });
</script>
</body>
</html>
Am I doing something wrong here? Also, the last script does not make any difference, is just a solution I found somewhere that didn't work for me
PS: I did not include app.js or index.js because they are just returning the component
EDIT:
Also, at first, the select was not showing at all, because bootstrap-select.min.js had that display:hidden property so I had to include a css like display: block!important for the select component