• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

PHP CRUD Dropdown with Search to Populate Field


I have this typical CRUD project that I am working on, and this is the ADD RECORD page:

What I am struggling to figure out is how to convert the SUPPLIER field into a searchable drop-down list - so you can "search-as-you-type" the supplier name. For example, if you start typing "so" it should filter the list to anything with that combination of letters (see below) - and then you can select one of those results to populate the field - without the possibility of entering manually a new supplier:


Here is the table structure from MySQL:

Here is the code for this page - I would appreciate any help - thank you in advance!




<?php include('includes/header.php'); ?>

    <h1>Costing System</h1>

    <div class="container mt-5">

        <?php include('message.php'); ?>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Add Market Price
                            <a href="marketprices.php" class="btn btn-danger float-end">BACK</a>
                    <div class="card-body">
                        <form action="code.php" method="POST">
                            <div class="mb-3">
                                <input type="text" name="supplier" class="form-control">
                            <div class="mb-3">
                                <label>Purchase Unit [Primary]</label>
                                <input type="number" name="p_unit_primary" class="form-control">
                            <div class="mb-3">
                                <label>Purchase Unit [Secondary]</label>
                                <input type="number" name="p_unit_secondary" class="form-control">
                            <div class="mb-3">
                                <label>Purchase Unit [Unit]</label>
                                <input type="text" name="p_unit_unit" class="form-control">
                            <div class="mb-3">
                                <input type="number" name="price" class="form-control">
                            <div class="mb-3">
                                <label>Price Date</label>
                                <input type="date" name="price_date" class="form-control">
                            <div class="mb-3">
                                <input type="text" name="notes" class="form-control">
                            <div class="mb-3">
                                <button type="submit" name="add-marketprice" class="btn btn-primary">Add Market Price</button>

    <?php include('includes/footer.php'); ?>
If you want the field to be dynamic, you will need to use javascript.

The library that I personally use to achieve this is GitHub - twitter/typeahead.js: typeahead.js is a fast and fully-featured autocomplete library but there are many options. The one I use hasn't been updated in nearly a decade so it's probably not the best out there, to be honest.

On the other hand, if you just want a very typical HTML dropdown list (not anything fancy), you would do something like this:

<select name="supplier">
  <?php foreach ($suppliers AS $supplier): ?>
    <option value="<?= $supplier->id ?>"><?= $supplier->suppliername ?></option>
  <?php endforeach; ?>

The end-user will select from a dropdown list of supplier names, but the ID for the supplier will be what's passed back in the HTTP request.

Note that this uses PHP short tags, which need to be enabled on your web server. If you don't have short tags enabled, then use <?php echo ... ?> instead of <?= ....

You'll also notice this code has a variable $suppliers. The SQL for this would look something like:

SELECT DISTINCT id, suppliername
FROM suppliers

Hope this helps. Good luck!

New Threads

Latest posts

Buy us a coffee!

Top Bottom