Step-by-step guide on implementing a Searchable Select Drop down in HTML and CSS using just a select element

Is there a way to make this select tag searchable?

How can I modify this select tag for searching purposes?

<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 have attempted using select2 CDN for making this searchable, however it is causing conflicts with my existing CSS. Can anyone provide me with code that would work for this purpose without affecting the CSS styles?

Answer №1

It is not possible to achieve this without using either Select2 or niceSelect.

However, there is a workaround by placing a <select> inside a datalist tag.

Check out the code below:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using SVG background images in Internet Explorer versions 7 and 8: a guide to HTML, CSS,

I have created a unique SVG image to use as a background, but it's not displaying in Internet Explorer 8 and earlier versions. I tried using tools like or http://code.google.com/p/svgweb/, but they only support SVG for IMG and Object elements, not ba ...

What is the best way to ensure the footer is always positioned at the bottom of each page

Hey there, I'm having an issue with printing a large table on my HTML page. I want the footer to appear at the very bottom of every printed page, but so far I haven't found a perfect solution. I came across using tfoot, which prints the footer at ...

PHP Email Form Sending Duplicate Emails to Recipients

My PHP mail form is set up to use AJAX & jQuery for validation and submission. Everything appears to be working fine, but the client receiving multiple copies of each email sent by the form. The number of duplicates ranges from 1 to 10 with no clear pa ...

verify that the div has finished loading with ajax

I am working on a project where I have a div with the id #pageToLoad. This div loads a form from formPage.php. I want to ensure that the page is fully loaded in the div so that if any errors occur, I can reset the form using: $("#form").reset(); Can some ...

Broadening the capabilities of jQuery through a versatile function

Currently, I am in the process of developing a generic function for my website using jQuery that will be utilized across the entire site to display success or error messages. After careful consideration, I have decided to transform this function into a plu ...

Sending the value from a for loop through AJAX and populating it into a form field

Currently, I have implemented a piece of JavaScript code that captures user input, sends a request to an endpoint using AJAX, and appends a specific field from the returned results as an option within a datalist. This functionality is working perfectly fin ...

Python: HTML regex not finding a match

This is the code snippet I am struggling with: reg = re.search('<div class="col result_name">(.*)</div>', html) print 'Value is', reg.group() The variable 'html' holds content like this: <div class="c ...

Adapt the CSS based on different screen sizes

I am currently developing a mobile application using angularjs and the ionic framework. My application is intended for both tablet and mobile versions. I have encountered an issue where I cannot use the same CSS for both the tablet and mobile versions. Is ...

Enhancing react-input-range with unique Custom Arrow heads

I'm currently working with react-input-range to create a price range slider. While I've managed to customize the CSS of the range slider, I now need to figure out how to add arrow heads inside the circles as shown below: https://i.sstatic.net/pm ...

Python Web Scraping Automation Tool - Inconsistent Encountering of 511 Error Code

My latest project involves opening Firefox with Selenium, extracting HAR files using BrowserMobProxy, and accessing JSON data from those files at timed intervals. Occasionally, however, I encounter a 511 Error: <!DOCTYPE html><html><head> ...

Transform HTML elements within an *ngFor iteration based on a specific variable in Angular 4

In my current project using Angular 4, I am faced with the task of dynamically modifying HTML tags within an *ngFor loop based on a variable. Here is the code snippet that represents my approach: <mat-card-content *ngFor="let question of questionGrou ...

Styling images side by side with CSS in Internet Explorer

I've encountered a CSS dilemma. I have a collection of images that I want to present side by side using an unordered list within a fixed width container. The goal is to have 3 images per row before moving on to the next set of 3 images. Each list ite ...

The Jumbotron and background images vanish as the window size transitions from full screen to smaller dimensions

Encountering an issue with my homepage: the jumbotron and background images disappear when the window size changes from full screen to small screen. However, upon resizing the window, the images re-appear. How can I make these images responsive? Below is ...

A guide on smoothly navigating to the desired row in a gridview using Asp.net

Currently, I am developing a project using ASP.net and C# technology. In my application, I integrated a GridView that contains multiple rows. Within the grid, there is a text box and a search button available. The columns displayed in the grid are Id and ...

Location: content positioned above the scrollbar in absolute placement

I am encountering the following issue: Within a table, there are multiple cells, some of which contain tooltips. When the user hovers over a specific cell, the tooltip is supposed to appear. However, the challenge arises with a table that has a horizontal ...

"Implementing master page and CSS styles on a child page: A step-by-step

Currently, I have a master page that is successfully being applied to all of my pages. However, it seems to be encountering an issue when trying to locate the CSS file address for pages within child folders. The folder structure looks like this: <scri ...

Finding the index number of a DIV element when it is clicked

Here is an example of the HTML structure I am working with: <div id="preview-wrapper"> <div class="dz-preview dz-image-preview"> <a class="rotate-a" href="javascript:void(0);"> <img class="rotate" src="public/a ...

Explore the transparency as you hover

Is there a way to adjust the opacity of a specific div class and other div classes when hovering over that particular div? If so, could someone explain how this can be achieved? Any feedback on this topic is greatly appreciated. Thank you. ...

Having trouble getting $compile to work in an injected cshtml file with Angular

Summary I am currently working on a large application where everything is designed to be very generic for easy expansion. One of the components I am focusing on is the dialog. Before suggesting alternatives like using ngInclude or angular templates, let m ...

When updating the HTML content, JavaScript is outputting the code as text instead of running it

I am encountering an issue with adding the body content of a JSON file, which contains HTML code, to my existing HTML. Instead of executing the code, it appears as text within paragraph or header elements. I have searched through various discussions but ha ...