I'm currently working on a unique dropdown feature that functions like a regular text field, displaying the text position. To achieve this, I've constructed a hidden dropdown menu positioned beneath the text field. My goal is to develop a jQuery script that extracts input from the text field, compares it with the dropdown options, and if there is a match, displays the corresponding option. Do you think this is achievable?
If you're looking for a solution, consider implementing autocomplete functionality with a drop-down menu. Take a look at this informative resource: http://www.example.com/autocomplete-dropdown-tutorial/
Take a look at this demo
JavaScript Code:
var choices=["First","Second"];
$("#data").on('keyup',function(){
var value = $(this).val();
$("#options").html("");
$.each(choices,function(index){
if(choices[index].indexOf(value) > -1){
$("#options").append("<li>"+choices[index]+"</li>");
}
})
})
**There are more optimal solutions available for achieving the same outcome, so feel free to explore different methods using this as a starting point.
Your content:
Code
Input Field: <input type="text" /><br />
Text and position: <span></span>
<select style="display: none;">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
JAVASCRIPT
$("input").on('change keyup paste', function(){
var theInput = this;
$.each($("select option"), function(index, option){
if ($(option).val().toLowerCase().trim() ==
$(theInput).val().toLowerCase().trim()){
var textToShow = $(option).val().trim() + " " + Number(index + 1);
$("span").text(textToShow);
$("select").val($(theInput).val().toLowerCase().trim());
} else {
$("span").text("");
}
});
});
Here is another example for you to check out
http://codepen.io/anon/pen/LVebbr
var $inputField = $('#inputText'),
$dropdown = $('.dropdown');
$inputField.on('keyup', function(){
var _value = $(this).val();
$dropdown.children('li').each(function(){
( $(this).html().indexOf(_value) > -1 ) ? $(this).css('opacity', '1') : $(this).css('opacity', '0');
});
});.dropdown li{
opacity:0
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="text" id="inputText" />
<ul class="dropdown">
<li>op1</li>
<li>op2</li>
<li>op3</li>
<li>op3</li>
</ul>As I'm working on my React app, it currently runs on the default port http://localhost:3000/. However, when I need to communicate data from the client to the server, I have to listen on a different port. Take a look at the below code snippet: const ex ...
While working on coding a menu opening animation, I encountered an issue today. Upon clicking the menu button, the menu opens and the elements inside receive an added class (resulting in a fade-in effect). Clicking the menu button again should close the ...
What can I do to address this problem? The jade file in question is as follows: extends layout block content h1. User List ul each user, i in userlist li a(href="mailto:#{user.email}")= user.username U ...
Recently, I've been delving into the world of javascript and ajax. I'm trying to create a dynamic select option list similar to this: https://i.sstatic.net/qELIf.png However, when attempting to compile using Google Chrome Developer tools (F12), ...
I recently integrated the pdf-viewer-reactjs library into my Next.js project and encountered the following error: error - ./node_modules/pdfjs-dist/build/pdf.js 2094:26 Module parse failed: Unexpected token (2094:26) You may need an appropriate loader to h ...
Attempting to create a unique column layout for different device sizes. For medium (md) and larger devices, 2 columns are used: md-8 and md-4. However, on smaller devices, the intention is to display half of the content in the md-8 column, followed by half ...
I have been experimenting with d3 libraries lately and came across http://bl.ocks.org/jroetman/9b4c0599a4996edef0ab. I successfully used it to draw a graph based on data from a tsv file and enable zoom in and out functionality, which worked well for me. Ho ...
I have an element that I want to trigger an onclick event with a callback function. Here is the code snippet: function cb_func() { alert("hello world!"); } function foobar(i, cb) { // do something if (cb != undefined) cb(); } onclic ...
As I delve into learning React and Gatsby, I encountered an issue with my page containing URL parameters. Despite everything working smoothly on my local machine, after the gatsby build process, the variable url = undefined. How can I retrieve these para ...
Currently, I have a total of 5 webRTC peers connected through the COTURN server (turnServer1). These peers are all behind symmetric NAT, requiring the use of the TURN server to establish connections. However, due to the media streams with audio and video b ...
I have incorporated a 3D hamburger model on my website using Three.js. However, I am facing an issue where the rotation behaves unexpectedly. The burger is supposed to rotate around itself at a 45-degree angle, but instead, it rotates from the upper left c ...
I'm running into issues with generating unique IDs for each product in a loop within my Rails variables. I need every "product" to have its own individual ID on the switch element so that I can toggle the switch when an item from the dropdown is selec ...
I find myself in a situation where I need to switch all unauthorized controls on my UI from a hidden state to a disabled state. Additionally, I want to add a tooltip with unauthorized text and have the control display this text when clicked. While I am ab ...
Encountered an error while using Winston in Node.js, how can we resolve it? The version of Winston I am using is 3.3.3 and winston-daily-rotate-file version is 4.5.0 I attempted npm i winston@next --save, but the error persists. ** Here is the Error Mes ...
As I attempt to execute npm start within my Node.js project directory, I am facing a challenge. Despite having the package.json file in the correct location (C:\Myfirstproject\Vinci\Projet_Web), I keep encountering an error message that read ...
I am working on an AngularJS application and I have a requirement to dynamically add AngularJS material components using Jquery upon clicking a button. While the components are successfully being added to the layout, the styles are not being applied to th ...
I am currently creating a form using React along with MUI. I'm trying to figure out how to prevent the form from being submitted when the user hits the enter key. Usually, I would use e.preventDefault(), but for some reason it's not working in th ...
I'm encountering an issue on my website regarding resizing elements and content on various resolutions, particularly on mobile devices. You can view the website here. I've been testing it on both an iPad and a 14" laptop. While everything appear ...
My goal is to ensure that the modal-body is vertically aligned for optimal visibility on both mobile phones and PCs. I am utilizing bootstrap for this purpose. <div class="modal-body" style="display: inline-block;"> <div> ...
A table was created using React.js and MUI-Datatables: import MUIDataTable from "mui-datatables"; const columns = ["Name", "Company", "City", "State"]; const data = [ ["Joe James", "Test Corp", "Yonkers", "NY"], ["John Walsh", "Test Corp", "Hartford", ...