The input Search list property in HTML DOM is used to return a reference to the list element that contains an input search field.
Syntax
searchObject.list.id
Return value: It returns a string value that represents the value of the id attribute of the datalist element.
Example: Below HTML code used to return the input search list property.
HTML
<!DOCTYPE html> < html >
< head >
< title > HTML DOM Input search list property </ title >
</ head >
< body style = "text-align:center" >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >DOM Input search list property</ h2 >
< label >Search anything: </ label >
< input type = "search" list = "Hello Geeks"
id = "search_id" value = "GeeksforGeeks" >
< datalist id = "Hello Geeks" >
< option value = "Google" />
< option value = "amazon" />
< option value = "flipkart" />
< option value = "Twitter" />
< option value = "Facebook" />
</ datalist >< br >< br >
< button onclick = "btnclick()" >Click Here!</ button >
< p id = "paraID" style = "font-size:20px" ></ p >
<!-- script to access search field -->
< script >
function btnclick() {
var txt = document.getElementById("search_id").list.id;
document.getElementById("paraID").innerHTML = txt;
}
</ script >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome 5 and above
- Edge 12 and above
- Mozilla Firefox 4 and above
- Opera 10.6 and above
- Safari 5 and above