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
Filter by
Sorted by
Tagged with
0 votes
1 answer
225 views

No datalist popup when readonly unset by event

My input text element is bound to a datalist element and is set to readonly. When clicking on the input element its readonly property gets unset. But the datalist popup does not show up when entering ...
Andreas's user avatar
  • 47
0 votes
0 answers
333 views

Input datalist inside shadow dom not working

I am trying to create with customElements my own input button with list attribute and datalist element. But it is not working when created inside a shadow dom. HTML: <test-input></test-...
Andreas's user avatar
  • 47
0 votes
1 answer
238 views

HTML5 DataList search available language?

In my datalist options, there are values in English and Korean. Here is the sample : <input type='text' list='dlValue'> <datalist id='dlValue'> <option values='apple'/> <...
KUNWOO MYUNG's user avatar
0 votes
1 answer
1k views

how to correctly display a large datalist on chrome

I recently made a form that requires an input that needed an autofill. Everything was working fine until I tested it with a large amount of data, where it suddenly break. I used a datalist where the ...
Hallemon's user avatar
  • 161
1 vote
1 answer
244 views

Displaying one value and submitting another through html datalist and *ngFor

I am creating an autocomplete text box using <datalist> with *ngFor functionality, however the code I am using is displaying both what I declare as the [value] and also what I am inputting ...
physicsboy's user avatar
  • 5,964
0 votes
1 answer
84 views

Using HTML datalist element with VueJS? Can't use hyperlinks?

I am trying to use HTML's datalist [https://www.w3schools.com/tags/tag_datalist.asp] element rather than an autocompletion library. I tried to wrap an a href element around the post.title. ...
redshift's user avatar
  • 5,059
1 vote
1 answer
114 views

Cannot set property after Get reques - Axios and HTML5 datalist

I am trying to do a GET request using Axios , but get the following error in console: TypeError: Cannot set property 'films' of undefined at eval (SearchBar.vue?e266:26) SearchBar.vue <...
redshift's user avatar
  • 5,059
-1 votes
1 answer
221 views

Is it possible for a datalist to have scrolldown?

I'm new to HTML and trying to use a datalist. I need to limit it to display only 5 items and the rest to be viewed using scrolldown. Is there any way? My code : <form> <input list="...
Swaminathan's user avatar
10 votes
1 answer
9k views

Is there alternative for datalist?

datalist { color: red; height: 10px; } <input list="langs"> <datalist id="langs"> <option value="Javascript"> <option value="PHP"> <option value="C#"> ...
ahmetbcakici's user avatar
2 votes
0 answers
1k views

Create multiple sections on html <datalist>

I'm wondering if i can divide the <datalist> into sections like <optgroup> does. Many thanks! Codes below: <label>Location:</label> <select> <optgroup label="...
ki.c's user avatar
  • 23
1 vote
5 answers
12k views

get id of selected option of datalist object by using data-value

I want to get the ID (data-value) of selcted option on a datalist object. I tryed to get the ID by using a Javascript function and use the this.dataset.value but i get the result undefined ...
Korty's user avatar
  • 309
0 votes
2 answers
2k views

<input> and <datalist> issue: only one <option> viewed in the list, the initial value of the <input>

Some datalists are not viewed properly. Only the initial value of the input is proposed in the datalist.Where is my fault ? I generate with php and data from Amazon, Google and French BnF (National ...
Franck's user avatar
  • 11
0 votes
2 answers
3k views

VueJS Component with datalist not showing options

I am utilizing VueJS and it's components to build a large series of datalists and selectors.. all with a submit button at the end of it when the form is validated... so far I can make a datalist ...
Erik's user avatar
  • 3,016
0 votes
1 answer
1k views

How to set Selected in Datalist in HTML?

Look at the below snippet:- $('input[list]').on('input', function(e) { var $input = $(e.target), $options = $('#' + $input.attr('list') + ' option'), $hiddenInput = $('#' + $input....
megedosaj's user avatar
0 votes
2 answers
1k views

Dynamic Array in HTML Datalist

I want to dynamically refresh the php code in this datalist, without reloading the whole page. <form id="form1" action="1.5-unterseite-nach-Eingabe.php" method="post" enctype="multipart/form-data"&...
philipB1's user avatar
2 votes
2 answers
964 views

How to prevent users from submitting false value of datalist in html?

I am having a code for Datalist: $('input[list]').on('input', function(e) { var $input = $(e.target), $options = $('#' + $input.attr('list') + ' option'), $hiddenInput = $('#' + $...
nitasot's user avatar
  • 21
6 votes
2 answers
2k views

How to detect selected option in datalist when has duplicate option?

I have a input type text with datalist that contains duplicate option values <input type="text" id="my-input" list="data-list"> <datalist id="data-list"> <option value="John" data-...
andrei bozdoro's user avatar
1 vote
1 answer
1k views

Internet explorer 10 "input" event on datalist option selection not firing

In the following example I have an input field and accompanying datalist element. I am trying to write javascript that listens for when a user selects an item from the list. I have seen it suggested ...
WillD's user avatar
  • 5,852
1 vote
0 answers
222 views

Knockout observable with datalist not working correctly in Edge

Selecting an option from an HTML5 <datalist> does not update the observable property in Edge. In Chrome it updates the observable immediately after clicking the option, and in IE it updates the ...
JB06's user avatar
  • 1,921
1 vote
0 answers
41 views

How do I delete datalist entries?

I'm trying to delete datalists from a textbox so the ones I have in my HTML can appear. Is there a way to delete datalist rows? <form> <input class="URL_Textbox" id="WebsiteName" ...
Joey's user avatar
  • 13
0 votes
1 answer
480 views

html datalist item not getting the selected value changed after a single click in IE 11

I am using HTML Datalist, it works well in Chrome. but in IE, it's not working as expected. Problem: after selecting any of the options, it's coming with a 'x' labeled-link at the end.Ideally, it ...
NawazSE's user avatar
  • 603
0 votes
0 answers
822 views

HTML5 datalist: Show dropdown only when arrow clicked

I'm using a HTML5 datalist (Chrome) . I want the dropdown to open only when the arrow is clicked, not when the select field is clicked directly. How can I do that? input::-webkit-calendar-picker-...
smolo's user avatar
  • 789
0 votes
0 answers
373 views

HTML: <input> Cannot seem to use "pattern=", and "list=" at the same time?

I am providing an input field for submission for users. One of which is a URL. I would like to restrict the URLs allowed as seen below: <input name="source" type="url" pattern="https://www....
eezzee's user avatar
  • 89
-1 votes
1 answer
993 views

Hide datalist options if input field is blank

I have a simple datalist set up here. I want to prevent being able to click the input field to see the list of options before typing something in. I only want the list to show when some possible ...
Robby's user avatar
  • 809
0 votes
0 answers
202 views

How to get the option tag bigger than input

I have a question about the option tag inside datalist tag. I'm creating an interface for some users and I need to make the option to be bigger than the input. I'm using firefox, by policies of the ...
dScheer's user avatar
  • 11
0 votes
1 answer
86 views

Confirm Box OK/Cancel Function

I am just a Beginner I was trying to define a function of Ok button click function of the alert box. and as i read here in others users's Question about the same. i think i should you confirm box i ...
Sachin Agarwal's user avatar
1 vote
3 answers
4k views

'[Object object]' is displayed instead of label in Vue.js datalist

I'm using <datalist> drop-down menu to display group names in our project. <data-list ref="groupName" name="groupName" label="Groups: " :options="groupList" ></data-...
Eem Jee's user avatar
  • 1,309
2 votes
3 answers
10k views

How can I handle events in datalist options in vuejs?

I have a requirement where I have to suggest in the data list and when a user selects any of the datalist options, I have to update other input fields accordingly. Here is my input field and Datalist ...
Adarsh Sojitra's user avatar
0 votes
1 answer
242 views

How to ignore trailing white spaces in text input when comparing to datalist options?

I am using AJAX to pull potential matching results from the server and append the options to the datalist on the search bar on every key-up event. The problem is if the user adds trailing white spaces,...
michjo's user avatar
  • 417
0 votes
1 answer
290 views

Best way to avoid auto-complete drop down from appending same value multiple times?

I have a search form which has some ajax querying the database as the user types and listing similar results in a datalist. The issue I was having is as a user typed, it would continuously append a ...
michjo's user avatar
  • 417
0 votes
1 answer
695 views

Value of DataList sourced from JavaScript returning undefined

I'm creating a datalist on my webpage that sources it's values from a JavaScript array (that sources from a Java array using JSP). Here is my code for populating the data list: <input name="...
Sam's user avatar
  • 11
2 votes
1 answer
95 views

using a single option list for multiple selects

Inspired by these questions: Add attribute selected to multiple select lists and HTML Form: Select-Option vs Datalist-Option Is there a way to make a datalist non-optional so I could have multiple ...
Reed's user avatar
  • 301
2 votes
1 answer
2k views

How to find datalist template options innerHTML value?

I wanted to know how to limit the number of datalist options displayed on a datalist dropdown. I found this solution which uses a datalist wrapping around a template, plus some javascript. But, I ...
logoologist's user avatar
0 votes
1 answer
3k views

How to limit datalist options without losing options "value=" functionality?

Using a unique solution from @Olli here at Limit total entries displayed by datalist I'm able to limit the number of suggestions offered by a datalist. The problem: that solution only allows for ...
logoologist's user avatar
2 votes
1 answer
312 views

How to use indexOf with datalist options

When a stateName (i.e. Vermont) is selected from the datalist, I want to display the state abbreviation name abbrName (i.e. VT) from the datalist option id= in the results. My current code searches ...
logoologist's user avatar
2 votes
1 answer
79 views

How to define and access datalist options for alternate option names

When a state name (i.e. California) is selected from the datalist, I want to display the state abbreviation from option id= in the results How do I define and access options in datalist? For ...
logoologist's user avatar
0 votes
2 answers
295 views

How to return the position of a value in a javascript object using a datalist

Upon selecting an option from the datalist, I'd expect this javascript code to return the option location in the javascript object. Without using datalist the code works as expected. Why doesn't ...
logoologist's user avatar
0 votes
1 answer
560 views

How to return a result from datalist without getting "undefined" error

When an option is selected from the datalist, I want that selected option to appear in the page and to do so simply by hitting the enter key. I'm a beginner coder. Perhaps the problem is value is ...
logoologist's user avatar
1 vote
0 answers
397 views

Angular 5 datalist need to show description on click need to send value

I am using datalist in angular 5 for one functionality like drop down. Initially I am loading description and value in datalist. But when I select the description from datalist it shows value for ...
Prabakaran V's user avatar
2 votes
0 answers
7k views

Autocomplete datalist on Thymeleaf

I'm building a view with Thymeleaf templates, which contains a form that provides a way to bind the value of my inputs with the attributes passed in the model. The backend was developed using Spring 4....
cppstudy's user avatar
1 vote
0 answers
883 views

React Fuzzy Search with Datalists - Values with Whitespace and Editing Input

I have created a fuzzy search react component. The intent is to be able to enter a dataset name into an input and a datalist is populated with suggestions of close matches to the current value. The ...
Talis Lazdins's user avatar
0 votes
1 answer
311 views

Is it possible to get HTML5 autocomplete list always open?

I try to create Angular 6 autocomplete with partly matching values. Is it possible to get HTML5 datalist opens always if got more then one option? At this moment it's opens only if exact match any ...
Andrey K.'s user avatar
  • 665
0 votes
2 answers
2k views

Display input selected value for particular card or element in vuejs?

I am displaying different cards with image and input element. <v-layout row wrap v-for="card in cards" :key="card.id"> <v-flex xs12> <v-card width=500px> ...
code.mevn's user avatar
  • 165
0 votes
1 answer
1k views

Calling event function for <datalist> and expanding the <input> tag - HTML 5

I am trying to use CSS to expand the input box on hover/focus of the search ICON of CSS Now, I am trying to call a function in html to angular component (seems that I cannot use CSS with datalist ...
vijayakumarpsg587's user avatar
0 votes
2 answers
743 views

ng-click event on html5 datalist not working angularjs

Iam trying an auto search and on selecting a product., I need to redirect to the product URL associated to selected dropdown. Iam able to get all search results. I have created datalist for all ...
sabarinath's user avatar
0 votes
2 answers
768 views

ng-click event on datalist not working

Iam trying an auto search and on selecting a product., I need to redirect to the product URL associated to selected dropdown. Iam able to get all search results. I have created datalist for all ...
shabarinath's user avatar
0 votes
1 answer
26 views

How can I put <Input> <datalist> it in the JS file because is increasing weight of HTML?

I have to pass a huge dataset of list of cities/ locations in a particular country to the users because it is going to be reusable. I can simply put it in the HTML code like so: <datalist id="...
Nishant Sah's user avatar
2 votes
0 answers
336 views

How to differentiate between select, change, input and paste event of a datalist bounded to an input element

Take a look at the code below: <html> <head> <script> function onInput() { console.log("onInput"); } function onChange() { console.log("onChange"); } function ...
Reza's user avatar
  • 3,673
0 votes
0 answers
124 views

Datalist Auto Complete IE vs Chrome

I have an issue with my Datalist autocomplete I created, if you run it in Chrome you can search by name or ID, so for example you can type in Doe and get result for John Doe. or you can type in 11109 ...
scripter78's user avatar
  • 1,147
1 vote
0 answers
571 views

How to hide dropdown list in datalist when is empty

I have an input and datalist as autocomplete search with dynamic data. When I typed "F" on my input I search with my endpoints those elements which match with my query. Such as <form > <...
alemarcha's user avatar

1 2 3
4
5
8