Hi there guys,
I would just like to know how I would go about by searching through a <select> list in an HTML page? I assume one would use JavaScript for something like this. On the HTML page there's a textbox which the user can type in a keyword, and then clicks a button. Then it needs to search through the <option> tags in the <select> list and highlight the <option> tag that contains the keyword.
Any help would greatly be appreciated!
Thanks guys...
Yes you use javascript, but I am pretty sure you don't want a drop down list. Nothing is shown until you drop it down and when you select something it rolls up.
Hi there,
Thanks for making it clear that it would be JS. I mod the list so that it's not a dropdown list anymore, so no worries about that. Just need to know now how one would be able to search through the <select> list...Anyone?
I tried something like this, that as far as I know, is supposed to work! I don't know why it doesn't though:
<html>
<head>
<title>Search List Test</title>
<script language="Javascript">
function searchMethod() {
var searchTerm = document.getElementById("searchQry");
var searchBounds = document.getElementById("nameList");
for(var i = 0; i < searchBounds.length; i++){
if(searchBounds[i].value.toLowerCase() == searchTerm.value.toLowerCase()){
searchBounds[i].selected = true;
}
}
}
</script>
</head>
<body>
<center>
<form>
<input type="button" value="Search" name="btnSearch" onclick="searchMethod()" />
<input type="text" id="searchQry" /> <br/>
<select id="nameList">
<option>Dean</option>
<option>Avril</option>
<option>Terence</option>
<option>Chris</option>
<option>Shane</option>
<option>Herman</option>
<option>Michael</option>
<option>Ryan</option>
<option>Angela</option>
<option>Jill</option>
<option>Clive</option>
</select>
</form>
</center>
</body>
</html>
This is just a simple example that if I get this working, I can incorporate it in my acctual project. Any help would greatly be appreciated!
// Pass the string you want to search. It will return valid index if string found else it will return -1
function search(str) {
var selEl = document.getElementById('myselect');
if(selEl) {
var options = selEl.options;
for(var i = 0; i < option.length; i++) {
if(options[i].value == str) return i;
}
return -1;
}
return -1;
}Give this a try.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search List Test</title>
<script language="Javascript">
function searchMethod() {
var searchTerm = document.getElementById("searchQry");
var searchBounds = document.getElementById("nameList");
var unlucky_me = true;
for(var i=0; i< searchBounds.length; i++){
if(searchBounds[i].value==searchTerm.value){
alert('Found one!');
unlucky_me=false
break;
}
}
if(unlucky_me) alert('Too bad');
}
</script>
</head>
<body>
<center>
<form>
<input type="button" value="Search" name="btnSearch" onclick="searchMethod()" />
<input type="text" id="searchQry" /> <br/>
<select id="nameList">
<option>Dean</option>
<option>Avril</option>
<option>Terence</option>
<option>Chris</option>
<option>Shane</option>
<option>Herman</option>
<option>Michael</option>
<option>Ryan</option>
<option>Angela</option>
<option>Jill</option>
<option>Clive</option>
</select>
</form>
</center>
</body>
</html>Hi tinymark,
Thanks for the reply. I ran your code just now, but when i type for instance 'Shane' in the search box and click the button, the alert box reads "too bad" the whole time, even though the name is clearly in the list. It does this with every name, any ideas?
Okay maybe I should just ask this:
How do I set any given <option> tag as selected="selected" using only java script?
You have to type Shane as Shane. If you type Shane as shane, it's not on the list.
Change to this code.
function searchMethod() {
var searchTerm = document.getElementById("searchQry");
var searchBounds = document.getElementById("nameList");
var unlucky_me = true;
for(var i=0; i< searchBounds.length; i++){
if(searchBounds[i].value==searchTerm.value){
alert('Found one!');
searchBounds[i].selected=true;
unlucky_me=false
break;
}
}
if(unlucky_me) alert('Too bad');
}I hope that solves your problem.
Nope,
Still doesn't work tinymark... I can honestly not see why this wouldn't though. Have you tried running this on your side yourself? Copy this code below and see what I mean:
<html>
<head>
<title>Search List Test</title>
<script language="Javascript">
function searchMethod() {
var searchTerm = document.getElementById("searchQry");
var searchBounds = document.getElementById("nameList");
var unlucky_me = true;
for(var i=0; i< searchBounds.length; i++){
if(searchBounds[i].value==searchTerm.value){
alert('Found one!');
searchBounds[i].selected=true;
unlucky_me=false
break;
}
}
if(unlucky_me) alert('Too bad');
}
</script>
</head>
<body>
<center>
<form>
<input type="button" value="Search" name="btnSearch" onclick="searchMethod()" />
<input type="text" id="searchQry" /> <br/>
<select id="nameList">
<option>Dean</option>
<option>Avril</option>
<option>Terence</option>
<option>Chris</option>
<option>Shane</option>
<option>Herman</option>
<option>Michael</option>
<option>Ryan</option>
<option>Angela</option>
<option>Jill</option>
<option>Clive</option>
</select>
</form>
</center>
</body>
</html>The "Too bad" box keeps on popping up, even though it shouldn't... I do type Shane as Shane for instance, as the search is case sensitive...
Let's see if the coffee worked.;)
<html>
<head>
<title>Search List Test</title>
<script language="Javascript">
function searchMethod() {
var searchTerm = document.getElementById("searchQry");
var searchBounds = document.getElementById('myForm');
var unlucky_me = true;
for(var i=0; i< myForm[2].options.length; i++){
if(myForm[2].options[i].innerHTML==searchTerm.value){
alert('Found one!');
myForm[2].options[i].selected=true;
unlucky_me=false;
break;
}
}
if(unlucky_me) alert('Too bad');
}
</script>
</head>
<body>
<center>
<form id='myForm'>
<input type="button" value="Search" name="btnSearch" onClick="searchMethod()" />
<input type="text" id="searchQry" /> <br/>
<select id="nameList">
<option>Dean</option>
<option>Avril</option>
<option>Terence</option>
<option>Chris</option>
<option>Shane</option>
<option>Herman</option>
<option>Michael</option>
<option>Ryan</option>
<option>Angela</option>
<option>Jill</option>
<option>Clive</option>
</select>
</form>
</center>
</body>
</html>Try this code
<html>
<head>
<script>
function Search()
{
var SearchKeyWord=document.getElementById("SearchText").value;
var SelLength=document.myform.SearchHighlight.length;
for(var i=0; i<SelLength;i++)
{
var searched_text = document.myform.SearchHighlight.options[i].text;
var IsMatch = searched_text.search(SearchKeyWord);
if(IsMatch != -1)
{
document.myform.SearchHighlight.options[i].selected = true;
document.myform.SearchHighlight.options[i].style.color = 'red';
}
else
{
document.myform.SearchHighlight.options[i].style.color = 'black';
}
}
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="SearchText" id="SearchText">
<input type="button" name="SearchButton" id="SearchButton" value="Search" OnClick="Search();">
<select name="SearchHighlight">
<option value="1">sample1 test</option>
<option value="2">sample2 test1</option>
<option value="3">sample3 check</option>
<option value="4">sample4</option>
<option value="5">sample5</option>
<option value="6">sample6</option>
</select>
</form>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.