How to create Searchable Select Drop down in HTML and CSS using only a select element

Question

I want this select tag as searchable

How to make this select tag searchable ?

<div>
    <select name="code" id="code">
        <option value="">Select Code...</option>
        <?php
        $rows = ["peter", "jones", "sakthi"];

        foreach ($row as $rows) {   ?>
            <option value="<?php echo htmlentities($row); ?>"><?php echo htmlentities($row); ?></option>
        <?php } ?>
    </select>
</div>

I'm trying to change this as searchable but i tried select2 CND its affecting my previous CSS. Kindly suggest me a code for this.

Answer 1

Without Select2 / niceSelect its not possible.

But their is one way to take <select> inside datalist tag.

Try below code:

<label for="fruits">Select a fruit:</label>
<input type="text" id="fruits" list="fruitList">
<datalist id="fruitList">
    <select>
        <option value="Apple"></option>
        <option value="Banana"></option>
        <option value="Cherry"></option>
        <option value="Date"></option>
        <option value="Elderberry"></option>
        <option value="Fig"></option>
        <option value="Grape"></option>
    </select>
</datalist>