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

Manually sending the form via Ajax for submission

I'm facing an issue where I am trying to utilize ajax to call a servlet upon form submission. However, the ajax call is not being triggered and the page ends up reloading. To solve this problem, I have set up a manual trigger for the form submission, ...

javascriptajax

Using Node.js to write data to a JSON file

Currently, I am working on a program that scans through an array containing numerous links. It reads through each link, extracts specific text, and then stores it in an output file as JSON. However, I am facing an issue with formatting the JSON file. The ...

javascriptjsonnode.jsweb

Obtaining your CSGO inventory via Steam API using jsonp: A step-by-step guide

Hey there! I'm currently facing an issue while trying to access a player's CSGO inventory using Valve's API. Unfortunately, I keep running into the error message stating that no 'access-control-allow-origin' header is present on th ...

javascripthtmljsonapijsonp

Swapping icons in a foreach loop with Bootstrap 4: What's the most effective approach?

I need a way to switch the icons fa fa-plus with fa fa-minus individually while using collapse in my code, without having all of the icons toggle at once within a foreach loop. Check out a demonstration of my code below: <link rel="stylesheet" href= ...

javascriptphphtmlcssbootstrap-4

Showcasing a variety of product titles with the help of CSS

Since the HTML is hosted on another server and I have no control over it, how can I use CSS to style certain list items? For example, The HTML on the server side: <ol> <li>Coffee</li> <li>Milk</li> <li>Orange Juice< ...

htmlcsslist

Is it possible to set a different default page index other than 0 in a material table using reactjs?

I have noticed that the default page index in the material table is set to '0', but the API I am currently using begins with a page index of '1'. Is there a way to adjust the default page index of the table to match that of the API? ...

javascriptreactjspaginationmaterial-uimaterial-table

Issue with plugin conflicting with Vimeo's Froogaloop

I've integrated the Vimeowrap Playlist plugin to create a playlist of videos from a specific channel. Everything seems to be working smoothly in that aspect, but now I'm facing an issue with tracking video events such as play and pause. When atte ...

jqueryvimeovimeo-apivimeo-playerfroogaloop

Utilizing HTTP PUT for transmitting JSON data via Jquery in Rails 3

HTTP PUT may not work across all browsers, so in Rails (specifically Rails 3), you can use POST and pass the _method query parameter instead. However, this method does not seem to be effective when sending JSON data. For example: $.ajax({ url: window ...

jqueryruby-on-railsajaxhttprest

Is there a way to remove text from a div when the div width is reduced to 0?

Upon loading the page, my menu is initially set to a width of 0px. When an icon is clicked, a jQuery script smoothly animates the menu's width to fill the entire viewport, displaying all menu items (links) perfectly. The issue I'm facing is that ...

javascriptjqueryhtmlcss

Pass an array containing an HTML string to the $.post method in jQuery

I have a problem with displaying HTML content fetched from a PHP script using the jQuery $.post method: $.post('{$site_url}tests/tests/content', params, function (data) { $('#some-div1').html(data[1]); $('#some-div2').htm ...

javascriptphpjqueryhtmljson

Tips for removing markers from personal Google Maps

I am having trouble deleting markers from my Google Maps using my code. The markers array seems to be empty even after adding markers. Can anyone help me troubleshoot this? Thank you! When I use console.log(markers.length) in the removeMarkers() function, ...

javascriptjqueryajax

Using Jquery to open a dialog box and then utilizing ajax to trigger the opening of

Currently experiencing some difficulties with jQuery and AJAX in trying to open a second dialog box within another dialog box. Below is the jQuery code: $( "#dropdownuser" ).dialog({ autoOpen: false, show: "blind", height : 600, ...

jqueryajaxgrails

In JavaScript, the "this" keyword points to a different object

Here is a script that needs attention: Bla = function() { this.prop = 123; } Bla.prototype.yay = function() { console.log(this,this.prop); } X = new Bla(); $(document).ready(X.yay); // output: #document undefined --> why? $(document).ready(functio ...

javascriptthis

Troubleshooting Asynchronous Code in JavaScript

I was experimenting with creating a brute force poll voting script. $('#vote').click(function(e) { var votes = 0; var attempts = 0; var failures = 0; for(var i = 0; i < 500; i++){ ...

javascriptjqueryajaxblocking

Ways to adjust the border color when error helper text is displayed on a TextField

I am currently working with React Material UI's TextField element. What I aim to achieve is when the submit button is pressed, the helpertext displayed should be "Please enter the password." It should look like this: However, once the helpertext is ...

javascripthtmlcssreactjssass

I am facing an issue with the Ionic Framework where the Javascript function for JWPlayer only works after the page is reloaded. Can anyone help

I'm currently troubleshooting the use of JWPlayer for streaming videos in an Ionic app. However, I've encountered a problem. The player only seems to load when I refresh the page, rather than when I navigate through the list of videos. Here is ...

javascriptangularjsionic-frameworkjwplayer

Avoid using jQuery when implementing a new form

Consider a scenario where you have an input field: <input type="text" id="smth" value="" /> and you are using jQuery to send this data to a .php file. $("#submit_button").click(function() { var info = {}; info['smth'] = $(& ...

phpjqueryhtml

Steps for sharing a word file between two users

Can someone help me with sending a file to another user and providing them with a download link? I have already attached the file to the database table of the recipient, but now I need to figure out how to allow them to download and view it. I've hear ...

htmlruby-on-railsdownloadcontrollerpaperclip

How to utilize FileReader for parsing a JSON document?

I'm currently facing an issue while attempting to read and copy a JSON file uploaded by the user into an array. When using .readAsText(), the returned data includes string formatting elements like \" and \n. Is there a way to utilize FileRe ...

javascripttypescriptfilereader

An error has occurred in NodeJS: Value undefined is out of the acceptable range for an unspecified property in the options

I am currently leveraging worker_threads in nodejs to handle the task of reading multiple files and processing the rows for subsequent insertion into a database (using oracle-db). The volume of data I deal with is substantial, typically exceeding one mill ...

javascriptnode.js