How to implement dropdown with search option within custom files?

PHPMaker General Discussion (PHPMaker)
1

Hi
Can anyone give me an example on how to implement a dropdown with search option within custom files.
was using selectpicker class but this has stopped working in V2022many thanks

2

You may post your code for more discussion.

3

I Was using

loadjs.ready("load", function () {
	$(".selectpicker").selectpicker();
});
<select name="platform" class="selectpicker btn-space" data-placeholder="Select Platform"  title="Select Platform" >

and loading

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.11/js/bootstrap-select.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.11/css/bootstrap-select.min.css

within styles and scriptscan get it to work with loading

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css

and within the custom file

the this break the page formatting etc.any ideas would be great

thanks

4

PHPMaker template already contains Bootstrap, if your Custom File uses Include common files, never add bootstrap(.min).js or bootstrap(.min).css again or you’ll break the JavaScript or CSS.PHPMaker 2022 uses Bootstrap 5, if your widget still uses Bootstrap 3 and does not work with Bootstrap 5, you need to replace it with some other widget.

5

Hi
Removed from bootstrap(.min).js or bootstrap(.min).css a from style and scripts
do i still need?

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.11/js/bootstrap-select.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.11/css/bootstrap-select.min.css

within my custom file i have

loadjs.ready("load", function () {
   $(".selectpicker").selectpicker();
});

<select name="platform" class="selectpicker btn-space" data-placeholder="Select Platform"  title="Select Platform" >

it formats the dropdown, but it does not drop down. there are no error either?any ideasthanks

6

What did you mean by but it does not drop down? Did you mean there are no option values inside that dropdown/Combobox control? If so, how did you want to assign the option values to that control?

7

arbei wrote:

PHPMaker template already contains Bootstrap, if your Custom File uses > Include common files> , never add > bootstrap(.min).js > or > bootstrap(.min).css > again or you’ll break the JavaScript or CSS.

That means removing your Bootstrap 3 .js and .css files.

8

Yes there are no option in the drop down
i am doing the following. is this cocrrect?

	<select name="platform" class="selectpicker btn-space" data-placeholder="Select Platform"  title="Select Platform" >
					<?php
					$sql = "select * from settings where type = 'x?x'";
					$stmt = ExecuteQuery($sql);
					if ($stmt->rowCount() > 0) {
						while ($row = $stmt->fetch()) {
							echo "<option value='" .$row['setting1'] . "'>" . $row['setting2'] ." </option>";

						}
					} else {
						echo "No records found.";
					}
					echo "</select>";
					?>
					</select>
9

i only see the following getting loaded
/css/select2-bootstrap5.min.css
/bootstrap5/js/bootstrap.min.js

10

andyrav wrote:

echo “”;
?>

>

Why are there two closing tag select?
11

Fixed the extra close select and still didnt work
Are you able to test and see if it works for you within a custom file if so can you share the code please
Been trying everything with no luckany thanks

12

Is this the related resource you meant? → https://developer.snapappointments.com/bootstrap-select/

13

Trying to basically get a dropdown with search and mutilate select within a custom files
was looking at
https://getbootstrap.com/docs/5.0/forms/select/just can not get anything to work and was hoping some genius in the forum might be able to help me :wink:

14

So, which one actually you want to use? The previous one (bootstrap-select) or the latest one (bootstrap 5 select)?

15
  1. bootstrap-select does not work with Bootstrap 5, see https://github.com/snapappointments/bootstrap-select/issues/2641.
  2. If you just need a normal Bootstrap Select (https://getbootstrap.com/docs/5.0/forms/select/) which does not use JavaScript, you should remove your JavaScript and replace the CSS class “selectpicker” by the Bootstrap class “form-select”.
16

Thanks, do you know a way to implement search into the drop down

17

I suggest you to do the following:

  1. Use Select2 that available since PHPMaker v2021,
  2. You may generate a simple table that lookup to another table,
  3. You may then refer to the generated script files for your Custom Files.
  4. You may post your code for more discussion.