Can anyone help me with integrating a search functionality inside a select tag?

I am working on a select dropdown and want to add a search box to easily filter through the available options. I know this can be done using the chosen library, but I prefer to implement it using plain JavaScript or jQuery.

Does anyone have suggestions on how to achieve this without relying on an external library?

https://i.stack.imgur.com/WK9DB.png

.Organization_Desg_filter_select {
                padding: 10px 0px;
                border-width: 0px;
                width: 240px;
            }
<label class="mt-3 mb-0">Designation Name:</label>
                            <select class="Organization_Desg_filter_select">
                                <option selected="selected" disabled>Select</option>
                                <option value="Public Relationship Officer">Public Relationship Officer</option>
                                <option value="Officer">Officer</option>
                                <option value="Associate">Associate</option>
                                <option value="Executive">Executive</option>
                                <option value="Head of Department">Head of Department</option>
                            </select>
                            <hr class="mt-0" />
javascripthtmljquerycss

Answer №1

When you find yourself in need of utilizing a Third party jQuery library, consider using Select2 for improved functionality and features. You can learn more about Select2 at

Answer №2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="name">The name of my closest friend:</label>
<input id="name" name="name" list="name-list" value="Szymon"/>

<datalist id="name-list>
    <option value="Albert">
    <option value="Szymon">
    <option value="Michał">
    <option value="Diana">
    <option value="Marek">
    <option value="Kuba">
</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

JavaScript's wildcard character, *, in a regular expression will always match something

I am currently attempting to verify whether a given string contains only uppercase letters, numbers, and underscores by utilizing the pattern matching approach with /[A-Z0-9_]*/. Despite this, executing the following code results in a return of true: /[A ...

javascriptregex

AJAX jQuery requests can flatten arrays when they are sent

The below code shows an endpoint written in Express, using the body-parser middleware. app.post("/api/poll/new",api.NewPoll); api.NewPoll = function(req,res){ if(!req.body) return res.status(400).send("MISSING BODY"); console.log(req.body,typeof(r ...

javascriptjqueryajaxexpress

The post data is being altered by jQuery AJAX when posting

When I'm utilizing jQuery post to send checkbox values to another file, the page works fine without any issues. However, when using jQuery post, it seems to interfere with the array and causes it to malfunction. The form fields for my radio field are ...

phpjqueryajaxforms

The database server is not appearing on the main.js page of the client

My client's main.js file contains code that is meant to display previous form entries on the webpage, but after submitting the form, no entries appear on the HTML page. My server is running on port 7777 and the root route works in Postman, as does the ...

javascripthtmlexpressvite

Tips for retrieving the xpath of elements within a div using python selenium

<div class="col-md-6 profile-card_col"> <span class="label">Company Name :</span> <p class="value">Aspad Foolad Asia</p> </div> For a while now, I've been trying to troublesho ...

pythonhtmlselenium

Rearrange HTML list items automatically according to changes in numeric sort order

I am working on a web page that features a dynamic ranked list. The items in the list are assigned a specific rank order number which changes based on user interactions elsewhere on the page. I have been exploring different options to automatically reorgan ...

javascripthtmllistsorting

Bootstrap Datepicker - dropup instead of dropdown

I'm a newcomer and have been struggling to set up the Bootstrap Datepicker. Whenever I try, all I see is the input field with the value "12-02-2013", but there's no dropdown menu when I click on it. Despite searching through various examples on ...

jquerytwitter-bootstrapdatepicker

Tips for ensuring the pop-up submenu remains visible even when the cursor is outside the parent container and submenu during hover

Is there a way to keep the pop submenu visible even when the mouse hovers outside of its parent container or the submenu? Currently, if the mouse doesn't move straight down from the parent container (B) .account-settings-container to the top arrow of ...

csspopuphoverpositionmouseover

Testing Angular services by injecting dependencies

I'm currently working on test driven development for an angular service using Jasmine. However, I've encountered an issue with resolving the $resource dependency, which is causing a stumbling block at the beginning of my process. The specific er ...

javascriptangularjs

Is it possible to have the ShowHide plugin fade in instead of toggling?

I'm currently utilizing the ShowHide Plugin and attempting to make it fade in instead of toggle/slide into view. Here's my code snippet: showHide.js (function ($) { $.fn.showHide = function (options) { //default variables for the p ...

javascriptjqueryshow-hide

Contrast between pre-tag in HTML and white-space: pre newline exclusion

I originally thought that the pre(html tag) would act just like 'white-space:pre'. However, it turns out that it does not behave in the same way. <pre> aaa bbb </pre> <p style="white-space:pre;"> aaa bbb </p> The <pr ...

htmlcss

In JavaScript, combine two arrays of equal length to create a new array object value

Trying to figure out how to merge two arrays into a new object in JavaScript var array1 = ['apple', 'banana', 'orange']; var array2 = ['red', 'yellow', 'orange']; If array1[0] is 'apple&apos ...

javascriptjqueryarraysjsonobject

Discovering a specific number within an ID and selecting the corresponding checkbox using jQuery

Let me explain a bit about my situation. I have two sets of checkboxes set up differently: <input type="checkbox" id="quick" value="6" /> <input type="checkbox" id="quick" value="3" /> The second set looks like this: <div class="check1"&g ...

jqueryarraysfindcheckbox

Dealing with errors in node.js

Node.js asynchronous functions typically have a callback, with some like fs.writeFile passing an err argument. fs.writeFile('message.txt', 'Hello Node', function (err) { if (err) throw err; console.log('It\'s saved!& ...

javascriptnode.jserror-handling

What steps are needed to switch colors after a loop has been clicked?

I have a loop setup like this: data: { show: false } .test { hight: 10px; background-color: red; } .test2 { hight: 15px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div v-for="value in da ...

javascriptloopsvue.jsbind

Error: Unable to access the 'create' property of an undefined object while utilizing sequelize to register a user and add an entry

Whenever I try to execute this controller, an issue arises indicating a problem with the recognition of the .create method from the model. What is the correct way to import Sequelize in order to utilize it effectively? const db = require("../Models/m_use ...

javascriptnode.jssequelize.js

The Angular 1.x Ajax request is not triggering the expected update in the view

I am encountering an issue with my Angular application where the data retrieved from a JSON file is not updating in the view when the JSON file is updated. It seems like the JSON file and the view are out of sync. As a newcomer to Angular, I am struggling ...

javascriptangularjsjsonajax

Generating dynamic content

I require assistance with a programming issue. I am working with two separate components: Stage and Executor. Within the Stage component, I am attempting to create new elements based on input parameters, while in the Executor component, I set these paramet ...

htmlangulartypescriptng-container

Using SQL to Insert Values into Select/Option

I am attempting to create a select form element with predetermined options. <select name="select1"> <option value="value1">Value 1</option> <option value="value2">Value 2</option> <option value="value3">Value 3 ...

phphtmlmysqlsqlforms

How do I eliminate excess space following the resizing of the Material UI Drawer component?

I adjusted the size of my MUI drawer to a specific width and now I am facing an issue where there is extra space left after resizing. This results in a margin-like space between the drawer and the Lorem Ipsum text content. My goal is to eliminate this rema ...

cssreactjsmaterial-uinavigation-drawerwhitespace