Questions tagged [html-datalist]
The HTML5 <datalist> element represents a set of <option> elements that represent predefined options for other controls (like <input>).
html-datalist
400
questions
0
votes
1
answer
26
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=...
- 353
0
votes
1
answer
15
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">
...
- 145
0
votes
0
answers
28
views
Options in Datalist not Displaying Correctly after Comma in Input Field
I'm encountering an issue with a JavaScript function that dynamically filters options in a Datalist based on the input in an associated text field. The filtering works well in most cases, but there's ...
0
votes
0
answers
47
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
96
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": ...
- 89
0
votes
0
answers
42
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 ...
0
votes
0
answers
59
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 ...
0
votes
1
answer
49
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)?
- 4,830
0
votes
0
answers
29
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 ...
- 4,830
1
vote
2
answers
211
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,729
0
votes
0
answers
18
views
Getting the ID of the selected option in a non-unique datalist (no jQuery)
I am attempting to get the id of the selected option in a non-unique datalist without using jQuery.
Here is an image of the list I am currently working with
HTML
<datalist id="contacts"&...
- 21
1
vote
1
answer
2k
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
764
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 ...
- 641
0
votes
0
answers
63
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
4
votes
1
answer
191
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 ...
- 78.5k