New Topic/Question
Reply
Hi there,
I have a <select> list with contact names in one of my HTML pages, as well as one button and one text area that will serve as a search function. What I want to know, is how can one go about, by having the user type in a keyword in the textbox, clicking the "search" button. And have the matching <option> highlighted in the list?
I don't know if this will make use of Javascript, altough my guts are telling me that it probably will..
Thanks in advance!
3 Replies - 4798 Views - Last Post: 18 March 2011 - 11:21 AM
#1
Dean_Grobler
- D.I.C Regular
Reputation: 39
- Posts: 390
- Joined: 15-January 10
Search function with <select> tag
Posted 16 March 2011 - 01:19 AM
Is This A Good Question/Topic?
0
MultiQuoteReplies To: Search function with <select> tag
#2
bmcginnis
- D.I.C Head
Reputation: 8
- Posts: 130
- Joined: 21-February 09
Re: Search function with <select> tag
Posted 16 March 2011 - 10:07 AM
Working on a solution for you now, I'll repost once it's done.
On a side-note, this would be Javascript, so a moderator may want to move this.
On a side-note, this would be Javascript, so a moderator may want to move this.
This post has been edited by bmcginnis: 16 March 2011 - 05:14 PM
Was This Post Helpful?
1
#3
Dean_Grobler
- D.I.C Regular
Reputation: 39
- Posts: 390
- Joined: 15-January 10
Re: Search function with <select> tag
Posted 17 March 2011 - 12:50 AM
bmcginnis, on 16 March 2011 - 10:07 AM, said:
Working on a solution for you now, I'll repost once it's done.
On a side-note, this would be Javascript, so a moderator may want to move this.
On a side-note, this would be Javascript, so a moderator may want to move this.
Thank you so much! Can't wait to see what you came up with
Was This Post Helpful?
0
#4
bmcginnis
- D.I.C Head
Reputation: 8
- Posts: 130
- Joined: 21-February 09
Re: Search function with <select> tag
Posted 18 March 2011 - 11:21 AM
Here you go I've created 2 different methods for searching through select options.
- highlightOption(color) highlights the searched term the color of argument color.
- highlightOption2(color) highlights the searched term the color of argument color, AND switches the searched term to selected.
The test html I wrote below uses highlightOption(color).
I've created 2 different methods for searching through select options.- highlightOption(color) highlights the searched term the color of argument color.
- highlightOption2(color) highlights the searched term the color of argument color, AND switches the searched term to selected.
The test html I wrote below uses highlightOption(color).
<html>
<head>
<title></title>
<script language="Javascript">
function highlightOption(color){
var searchTerm = document.getElementById("searchbox");
var searchBounds = document.getElementById("fruitlist");
for(var i = 0; i < searchBounds.length; i++){
searchBounds[i].style.backgroundColor = "#FFFFFF"; //default color
if(searchBounds[i].value.toLowerCase() == searchTerm.value.toLowerCase()){
searchBounds[i].style.backgroundColor = color;
}
}
}
function highlightOption2(color){
var searchTerm = document.getElementById("searchbox");
var searchBounds = document.getElementById("fruitlist");
for(var i = 0; i < searchBounds.length; i++){
searchBounds[i].style.backgroundColor = "#FFFFFF"; //default color
if(searchBounds[i].value.toLowerCase() == searchTerm.value.toLowerCase()){
searchBounds[i].selected = true;
searchBounds[i].style.backgroundColor = color;
searchBounds.style.backgroundColor = color;
}
}
}
</script>
</head>
<body>
<form>
<select id="fruitlist">
<option>Apple</option>
<option>Blueberry</option>
<option>Cherry</option>
<option>Grape</option>
<option>Lemon</option>
<option>Mango</option>
<option>Orange</option>
<option>Peach</option>
<option>Raspberry</option>
<option>Strawberry</option>
<option>Watermelon</option>
</select>
<input type="text" id="searchbox" />
<input type="button" value="Search" onclick="highlightOption('#FFFF00')" />
</form>
</body>
</html>
This post has been edited by bmcginnis: 18 March 2011 - 05:33 PM
Was This Post Helpful?
1
Page 1 of 1
|
|
| 