404 questions
0
votes
1
answer
138
views
Enter Key Not Working with <datalist> in Edge Browser
Problem Statement
When using the <datalist> element in an input field in Microsoft Edge, pressing the Enter key does not trigger any event while the datalist options are displayed.
Steps to ...
0
votes
1
answer
83
views
datalist shows two visual representations of the dropdown option list
With this datalist generated by the code below, in chrome/edge, I click on the input box, and two dropdowns show up at the same time, like this. What am I doing wrong? it only shows the one list in ...
- 11
1
vote
1
answer
222
views
Datalist does not work in Edge when the input field is CompanyId
So it seems when the label for the datalist has company in it and the input field is called Company Edge, it thinks it should list company names I have used in the past and not the options in the list....
- 47
0
votes
2
answers
539
views
Closed Datalist does not reopen in Edge
In Microsoft Edge, using a Work Profile, it shows an "X" to close a datalist from a text input field.
Once i click to close it, there is no way to make it reappear.
In Google Chrome and in ...
- 59
0
votes
1
answer
108
views
Maximum Call Stack Size Exceeded when using datalist in React
I'm building a React component that fetches drug data from an FDA API and displays it in a <datalist> for searching. However, I'm encountering a `Maximum call stack size exceeded error when ...
- 103
0
votes
1
answer
58
views
Django - select onchange event not working anymore if using jquery-editable-select
I'm using a select item from a django model with a onchange event to trig a JS script :
forms.py
class forms_bdc(forms.ModelForm):
[...]
bdc_description_1 = forms.ModelChoiceField(queryset=...
- 399
0
votes
1
answer
75
views
Capture click event for Datalist Option in React
Assume to have this Datalist element in a React component:
const MyComp = () => {
return (<>
<input list="list-name">
<datalist id="list-name">
...
- 335
0
votes
0
answers
67
views
How to maintain text formatting in datalist values
So I need the text format to have spaces down, the values copied and pasted from Excel and the users of the website I'm creating need the format of the copied text to remain the same.
Example:
Work
...
- 3
0
votes
2
answers
134
views
Add filter/search to dropdown menu dynamically filled from a local json file
I'm looking for a way to add filter/search to a dropdown menu that is dynamically filled from a local json file.
Here's my script :
var json = [{
"id": 3,
"name": "Ann"
},
{
"id": ...
- 143
0
votes
0
answers
96
views
How to access virtual keyboard suggestions with javascript the same way i could using a <datalist> in html
I have a rather compact static UI made in JS + Jquery/HTML/CSS.
I need to make a a text input with suggestions, which so far i succeeded however it misses one thing. That is the suggestions (or ...
2
votes
0
answers
106
views
Horizontal scroll from datalist html in Chrome mobile
I am working with the data-list feature in HTML forms...
<input list="veepeeone" name="veepeeone" placeholder="Null"
value="{{ veepeeone }}" autocomplete="off">
<datalist ...
- 23
0
votes
1
answer
111
views
Knowing when datalist is currently active/open
Is it possible to know when the HTML <datalist> is currently active/open (via css pseudo-element or javascript event or otherwise)?
- 5,110
0
votes
0
answers
62
views
Is there a fuzzy match for datalist filtering?
<datalist> (MDN) seems to only find an exact match of its entries. As a workaround, I added a canonical version without vowel mutations, but it looks a bit chunky. Is there a better way to make ...
- 5,110
1
vote
2
answers
480
views
How can I get the suggested values from an input datalist using pure Javascript?
I'm using a plain text input plus datalist to suggest values as the user interacts with the input. I'd like to know if there's a way to get the suggested items shown.
E.g.
document....
- 2,859
1
vote
1
answer
3k
views
Accessibility in Dropdown / Select
For a sport site showing results on various events, I have three “dropdown” menus were I can do various selection.
Even though the UI is a dropdown, letting a user select from various options (the ...
- 21
1
vote
2
answers
2k
views
Trigger event after selecting datalist option
Is there a way to trigger a JavaScript event specifically after selecting a datalist option? By that I don't mean if any input has been entered, or even if an input identical to an option in the ...
- 619
0
votes
0
answers
89
views
React dynamic Datalist - Options are not populated via api response
Please find the issue below.
Initially data will be empty array, so the loading option will be displayed in data list. But when the datalist is clicked, an api call will be made to get the data. Once ...
- 11
0
votes
1
answer
275
views
Cannot find option of datalist with `@testing-library/cypress`
I'm trying to write a test that confirms that a <datalist/> has a list of <option/> elements using role-based queries from @testing-library/cypress. Strangely, when I try to query by the ...
- 79k
2
votes
2
answers
260
views
How can you integrate datalist with datetime-local
I am trying to create an html datetime-local field which tells the user they can only pick from certain dates. Previous answers (such as this one - Disable certain dates from html5 datepicker) have ...
- 4,442
0
votes
0
answers
225
views
Datalist not showing options, if records more than 500
function loadDynamicDatalist() {
let d = document.getElementById("browsers");
let options = '';
for (let i = 0; i < 1200; i++) {
options += '<option value="datalist' + i + '">...
- 65
0
votes
3
answers
87
views
Can not receive value from a data-list
I've tried countless ways now to receive the value of this data-list when the user clicks the button to pass the information to the APIs and return the data. I am trying to receive these country names ...
0
votes
0
answers
1k
views
Why does Bootstrap 5 not style datalists?
For a form, I would like to use the HTML5 datalist option so that I can provide a list of terms that will be suggested to the user for autocompletion - but entering another value than the suggested ...
- 11
0
votes
1
answer
186
views
How do I update dropdown options after input data change
I have dropdown list where options are filling with values inside js code. After click on submit button, I want my dropdown to be changed for updated values, but it will just add new values to already ...
- 561
0
votes
1
answer
66
views
How do I customize the <datalist> active border in Chrome?
I am using Chrome Version 109.0.5414.119 (Official Build) (x86_64) on macOS 13.1.
I want to customize the <datalist> blue border when it's active.
I have tried :active :hover and many selectors,...
- 7,830
1
vote
3
answers
2k
views
How to implement an autocomplete-datalist form field inside a CreateView in Django?
I am very new to web development and specifically using Django Framework.
I am trying to find a clean, efficient and non external package dependant implementation for an autocomplete-datalist form ...
5
votes
1
answer
1k
views
FireFox datalist does not open until double click
<input list="browsers" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<...
- 111
1
vote
1
answer
509
views
Is there a control similar to HTML Datalist for .Net MAUI?
I have a need for a picker-type control in my MAUI app, but the selection list contains over 1000 entries. I don't want to make my users scroll through 1000 entries to find the one they want to choose....
- 383
-3
votes
1
answer
156
views
How to sort data in javascript?
let div = document.createElement('div');
let ul = document.createElement('ul');
const data = {};
const el = document.getElementById("name");
sortName = 0;
sortCapital = 0;
sortPopulation = 0;
...
- 1
1
vote
1
answer
84
views
How to add sorting ability to list?
let div = document.createElement('div');
let ul = document.createElement('ul');
div.appendChild(ul);
async function f() {
//fetching and sorting data by regions and subregions
const res = ...
- 35
0
votes
1
answer
746
views
Remove iOS datalist input arrow
Safari on iOS add a blue arrow when using a datalist with an input on a website, like this :
I found some thread to remove the same arrow for Chrome like this one : Remove Datalist Dropdown Arrow in ...
- 2,396
0
votes
1
answer
1k
views
Update Datalist Options in React js
I am reading the data from database and displaying it in a autocomplete drop down list. When the user clicks on the input field the data is read from the database and response is fetched using axios. ...
1
vote
0
answers
445
views
input type color with presets doesn't work with chrome beta
I have this input type color with presets using datalist.
<input type="color" list="presetColors">
<datalist id="presetColors">
<option value="#...
- 1,507
0
votes
1
answer
220
views
Angular how to distinguish elements with the same value in a html datalist
basically my boss is forcing me to use a datalist in an interface for our website to select an employee from the list of all the employees even though there's no telling wheter the user used the ...
- 123
0
votes
1
answer
1k
views
Dynamic datalist option no showing
I'm trying to populate a datatable data dynamically with a datalist in one column using ajax server request.
From Php
<span class="input-group-btn">
<button type=&...
- 97
1
vote
0
answers
85
views
Onchange refresh when adding a new item
onchange works fine when selecting items from a datalist. The problem arises when I want to modify some element. Then they add another onchange and the modified text disappears once it is refreshed.
...
- 23
0
votes
1
answer
207
views
How to add margin or padding bottom to html datalist option?
I have a html code:
<div class="oas-wrapper">
<div>
<form>
<input type="text" id="scales" name="example" placeholder="###" list="exampleList">
<...
- 4,094
1
vote
1
answer
37
views
How do you use <datalist> with IHP?
Is there some builtin method for HTML text field completion with a simple <datalist> in IHP? E.g. as in https://stackoverflow.com/a/19779010/69663
- 4,863
0
votes
1
answer
452
views
Datalist doesn't disappear when input is blurred
I have an input with a datalist. Part of the behavior involves the input being blurred under certain conditions. When I call blur() however, the datalist doesn't go away like I expect and, even worse, ...
- 858
0
votes
1
answer
805
views
How to make input box show the options that match with the beginning of the user's input using html datalist?
I am new to React and want to implement an autocomplete suggestion box for a text input box that matches only the first letters of the options available and not just any substring which is the current ...
0
votes
1
answer
256
views
Getting just one value with 2 same text from datalist in jquery
I' am trying get just the row with one value but i getting 2 values o more values with the same text(), because the requeriment is with the text().
code for edit:
https://codepen.io/Dragonbl4ck/pen/...
3
votes
1
answer
2k
views
Why is HTML <DATALIST> dropdown appearing beside it's input instead of under it?
I have an input bound to a datalist, and it IS working, but when the dropdown initially opens, the option list is beside (to the right of) the input. After I type a few chars to narrow down the list, ...
- 1,730
0
votes
1
answer
642
views
How to make a datalist-enabled HTML INPUT with a default value still show alternatives when clicked?
After learning about the wonderful datalist feature in HTML 5 today, I have converted all my old messy combined input and select nightmares into datalist-enabled inputs. Works well except for one &...
- 131
0
votes
0
answers
114
views
Angular + Typescript: Accept Text Only If Value Inserted is Part of DataList
Apologies if this has been answered before, I was unable to find solution specific to my problem hence approaching you all genius minds. So coming right to the problem, this is what I'm facing,
So I ...
- 901
0
votes
1
answer
523
views
How to pass in item Id to text field tag from datalist
Currently I learning about Ruby on Rails. So I try to make 1 simple app, but I facing some problem.
I want to pass the item id from select tag datalist to text field tag in rails. But I want to show ...
- 3
2
votes
1
answer
1k
views
Datalist on iOS Safari
I am trying to use the <datalist> as an autocomplete populated via ajax. This works fine on desktop browsers including Safari. (There are some older posts on stackoverflow which indicate that ...
- 170
0
votes
0
answers
110
views
Dynamically Populate Linked Datalists with jQuery
I have multiple input datalist that will populate based on the input or selection in the previous datalist. It uses the jQuery load event to call a page with VBscript to pull the data from a SQL ...
- 3
0
votes
1
answer
673
views
Symfony creating an HTML5 Datalist form element
I've been trying to create a DataList in my Symfony application by following this thread. However, the custom template is never loaded, I just get a textfield and no responses when I attempt to search ...
- 9,960
1
vote
1
answer
4k
views
How to make datalist the same width as input html
Hi I was wondering how to give a datalist and the corresponding input the same width. I tried the following :
input {
width: 100%;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
...
- 1,396
0
votes
1
answer
1k
views
add a loading spinner inside the options of a datalist (angular
<input list="dataUsers" formControlName="user" placeholder="Type the user name" class="form-control form-control-lg" type="text" (ngModelChange)=&...
- 9
1
vote
1
answer
302
views
Is it possible to capture the key associated with a datalist item upon selecting an item from the list?
I have the below code to populate a search box with datalist items. The key of the datalist items is set to u.userID and the display is set to u.name. When an item is selected, I can get the u.name ...
- 2,962