We have no way of running asp.net stuff so that code doesn't do us any good. We need to see the generated markup. Got link?
No public link because it is used internally. But I've attached the generated source code here as well as the css file.
There is no such thing as <script languge=Javascript>. Change that to <script type="text/javascript">
In the CSS, 'span' is not a class name so remove the dot before it. Also, there needs to be whitespace inbetween. iow,:
'.span.spanNormalElement' must be 'span .spanNormalElement'
I have made the changes according to your above suggestions. Unfortunately now it fails even in IE6. Even the content of the dropdown menu won't show up.
Source code:
<!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>
Welcome
</title>
<style type="text/css">
<!--
.style3 {
font-size: 72px;
color: #0000FF;
}
.style4 {color: #FF0000}
.style5 {color: #FFCC00}
.style6 {color: #006633}
.style7 {font-size: 100px}
.style8 {font-size: x-small}
-->
</style>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="net.js" type="text/javascript"></script>
<script language="text/javascript">
//Listing 10.4
window.onload = function(){
var elemSpan = document.createElement("span");
elemSpan.id = "spanOutput";
elemSpan.className = "spanTextDropdown";
//document.body.appendChild(elemSpan);
document.body.appendChild(elemSpan);
//Listing 10.7
//By default, user choose from searching in Contact in front page,
//so the data will be typeAheadData.aspx?t=1
//But if user changes his selection, there should be another event to set property
//and change data source there
document.Form1.txtUserInput.obj =
SetProperties(document.Form1.txtUserInput,
document.Form1.txtID,'typeAheadData.aspx?t=1',
true,true,true,true,"No existing matching data, intensive searching started, click search button to continue",false,null);
}
//Listing 10.6
function SetProperties(xElem,xHidden,xserverCode,
xignoreCase,xmatchAnywhere,xmatchTextBoxWidth,
xshowNoMatchMessage,xnoMatchingDataMessage,xuseTim eout,
xtheVisibleTime){
var props={
elem: xElem,
hidden: xHidden,
serverCode: xserverCode,
regExFlags: ( (xignoreCase) ? "i" : "" ),
regExAny: ( (xmatchAnywhere) ? "" : "^" ),
matchAnywhere: xmatchAnywhere,
matchTextBoxWidth: xmatchTextBoxWidth,
theVisibleTime: xtheVisibleTime,
showNoMatchMessage: xshowNoMatchMessage,
noMatchingDataMessage: xnoMatchingDataMessage,
useTimeout: xuseTimeout
};
AddHandler(xElem);
return props;
}
//Listing 10.8
var isOpera=(navigator.userAgent.toLowerCase().indexOf ("opera")!= -1);
function AddHandler(objText){
objText.onkeyup = GiveOptions;
objText.onblur = function(){
if(this.obj.useTimeout)StartTimeout();
}
if(isOpera)objText.onkeypress = GiveOptions;
}
//Listing 10.9
var arrOptions = new Array();
var strLastValue = "";
var bMadeRequest;
var theTextBox;
var objLastActive;
var currentValueSelected = -1;
var bNoResults = false;
var isTiming = false;
//Listing 10.10
function GiveOptions(e){
var intKey = -1;
if(window.event){
intKey = event.keyCode;
theTextBox = event.srcElement;
}
else{
intKey = e.which;
theTextBox = e.target;
}
if(theTextBox.obj.useTimeout){
if(isTiming)EraseTimeout();
StartTimeout();
}
if(theTextBox.value.length == 0 && !isOpera){
arrOptions = new Array();
HideTheBox();
strLastValue = "";
return false;
}
if(objLastActive == theTextBox){
if(intKey == 13){
GrabHighlighted();
theTextBox.blur();
return false;
}
else if(intKey == 38){
MoveHighlight(-1);
return false;
}
else if(intKey == 40){
MoveHighlight(1);
return false;
}
else{}
}
TypeAhead(theTextBox.value);
strLastValue = theTextBox.value;
}
//Listing 10.11
function TypeAhead(xStrText){
var strParams = "q=" + xStrText +
"&where=" + theTextBox.obj.matchAnywhere + "&t=" +
getSelectedRadioValue(document.Form1.rblOption);
// var loader1 = new net.ContentLoader("typeAheadData.aspx",
// BuildChoices,null,"POST",strParams);
var loader1 = new net.ContentLoader(theTextBox.obj.serverCode,
BuildChoices,null,"POST",strParams);
}
//Listing 10.12
function BuildChoices(){
var strText = this.req.responseText;
eval(strText);
BuildList(strLastValue);
bMadeRequest = false;
}
//Listing 10.13
function BuildList(theText){
SetElementPosition(theTextBox);
var theMatches = MakeMatches(theText);
theMatches = theMatches.join().replace(/\,/gi,"");
if(theMatches.length > 0){
document.getElementById("spanOutput")
.innerHTML = theMatches;
document.getElementById(
"OptionsList_0").className=
"spanHighElement";
currentValueSelected = 0;
bNoResults = false;
}
else{
currentValueSelected = -1;
bNoResults = true;
if(theTextBox.obj.showNoMatchMessage)
document.getElementById(
"spanOutput").innerHTML =
"<span class='noMatchData'>" +
theTextBox.obj
.noMatchingDataMessage +
"</span>";
else HideTheBox();
}
}
//Listing 10.14
function SetElementPosition(theTextBoxInt){
var selectedPosX = 0;
var selectedPosY = 0;
var theElement = theTextBoxInt;
if (!theElement) return;
var theElemHeight = theElement.offsetHeight;
var theElemWidth = theElement.offsetWidth;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
xPosElement = document.getElementById("spanOutput");
//debugger;
xPosElement.style.left = selectedPosX + 'px';
//xPosElement.style.left = "62px";
if(theTextBoxInt.obj.matchTextBoxWidth)
xPosElement.style.width = theElemWidth + 'px';
//xPosElement.style.width = "473px";
xPosElement.style.top = selectedPosY + theElemHeight + 'px';
//xPosElement.style.top = "224px";
xPosElement.style.display = 'block';
//debugger;
if(theTextBoxInt.obj.useTimeout){
xPosElement.onmouseout = StartTimeout;
xPosElement.onmouseover = EraseTimeout;
}
else{
xPosElement.onmouseout = null;
xPosElement.onmouseover = null;
}
}
//Listing 10.15
var countForId = 0;
function MakeMatches(xCompareStr){
countForId = 0;
var matchArray = new Array();
var regExp = new RegExp(theTextBox.obj.regExAny +
xCompareStr,theTextBox.obj.regExFlags);
for(i=0;i<arrOptions.length;i++){
var theMatch = arrOptions[i][0].match(regExp);
if(theMatch){
matchArray[matchArray.length]=
CreateUnderline(arrOptions[i][0],
xCompareStr,i);
}
}
return matchArray;
}
//Listing 10.16
var undeStart = "<span class='spanMatchText'>";
var undeEnd = "</span>";
var selectSpanStart = "<span style='width:100%;display:block;' class='spanNormalElement' onmouseover='SetHighColor(this)' ";
var selectSpanEnd ="</span>";
function CreateUnderline(xStr,xTextMatch,xVal){
selectSpanMid = "onclick='SetText(" + xVal + ")'" +
"id='OptionsList_" +
countForId + "' theArrayNumber='"+ xVal +"'>";
var regExp = new RegExp(theTextBox.obj.regExAny +
xTextMatch,theTextBox.obj.regExFlags);
var aStart = xStr.search(regExp);
var matchedText = xStr.substring(aStart,
aStart + xTextMatch.length);
countForId++;
return selectSpanStart + selectSpanMid +
xStr.replace(regExp,undeStart +
matchedText + undeEnd) + selectSpanEnd;
}
//Listing 10.17
function MoveHighlight(xDir){
if(currentValueSelected >= 0){
newValue = parseInt(currentValueSelected) + parseInt(xDir);
if(newValue > -1 && newValue < countForId){
currentValueSelected = newValue;
SetHighColor (null);
}
}
}
function SetHighColor(theTextBox){
if(theTextBox){
currentValueSelected =
theTextBox.id.slice(theTextBox.id.indexOf("_")+1,
theTextBox.id.length);
}
for(i = 0; i < countForId; i++){
document.getElementById('OptionsList_' + i).className =
'spanNormalElement';
}
document.getElementById('OptionsList_' +
currentValueSelected).className = 'spanHighElement';
}
//Listing 10.18
function SetText(xVal){
theTextBox.value = arrOptions[xVal][0]; //set text value
theTextBox.obj.hidden.value = arrOptions[xVal][1];
document.getElementById("ServerID").value=arrOptio ns[xVal][1];
document.getElementById("spanOutput").style.displa y = "none";
currentValueSelected = -1; //remove the selected index
}
function GrabHighlighted(){
if(currentValueSelected >= 0){
xVal = document.getElementById("OptionsList_" +
currentValueSelected).getAttribute("theArrayNumber ");
SetText(xVal);
HideTheBox();
}
}
function HideTheBox(){
document.getElementById("spanOutput").style.displa y = "none";
currentValueSelected = -1;
EraseTimeout();
}
//Listing 10.19
function EraseTimeout(){
clearTimeout(isTiming);
isTiming = false;
}
function StartTimeout(){
isTiming = setTimeout("HideTheBox()",
theTextBox.obj.theVisibleTime);
}
//Supplemental function added for handle option changes event
function ChangeOption()
{
//choose option 1, which is rbtOption_0 (Contact)
if (document.getElementById("rblOption_0").checked)
{
document.Form1.txtUserInput.obj =
SetProperties(document.Form1.txtUserInput,
document.Form1.txtID,'typeAheadData.aspx?t=1',
true,true,true,true,"No matching Data",false,null);
}
//choose option 2, which is rbtOption_1 (AD)
else if (document.getElementById("rblOption_1").checked)
{
document.Form1.txtUserInput.obj =
SetProperties(document.Form1.txtUserInput,
document.Form1.txtID,'typeAheadData.aspx?t=2',
true,true,true,true,"No matching Data",false,null);
}
//choose option 3, which is rbtOption_2 (IP)
else if (document.getElementById("rblOption_2").checked)
{
document.Form1.txtUserInput.obj =
SetProperties(document.Form1.txtUserInput,
document.Form1.txtID,'typeAheadData.aspx?t=3',
true,true,true,true,"No matching Data",false,null);
}
//choose option 2, which is rbtOption_3 (HostName)
else if (document.getElementById("rblOption_3").checked)
{
document.Form1.txtUserInput.obj =
SetProperties(document.Form1.txtUserInput,
document.Form1.txtID,'typeAheadData.aspx?t=4',
true,true,true,true,"No matching Data",false,null);
}
}
function getSelectedRadio(buttonGroup) {
// returns the array number of the selected radio button or -1 if no button is selected
if (buttonGroup[0]) { // if the button group is an array (one button is not an array)
for (var i=0; i<buttonGroup.length; i++) {
if (buttonGroup[i].checked) {
return i
}
}
} else {
if (buttonGroup.checked) { return 0; } // if the one button is checked, return zero
}
// if we get to this point, no radio button is selected
return -1;
} // Ends the "getSelectedRadio" function
function getSelectedRadioValue(buttonGroup) {
// returns the value of the selected radio button or "" if no button is selected
var i = getSelectedRadio(buttonGroup);
if (i == -1) {
return "";
} else {
if (buttonGroup[i]) { // Make sure the button group is an array (not just one button)
return buttonGroup[i].value;
} else { // The button group is just the one button, and it is checked
return buttonGroup.value;
}
}
} // Ends the "getSelectedRadioValue" function
function getSelectedCheckbox(buttonGroup) {
// Go through all the check boxes. return an array of all the ones
// that are selected (their position numbers). if no boxes were checked,
// returned array will be empty (length will be zero)
var retArr = new Array();
var lastElement = 0;
if (buttonGroup[0]) { // if the button group is an array (one check box is not an array)
for (var i=0; i<buttonGroup.length; i++) {
if (buttonGroup[i].checked) {
retArr.length = lastElement;
retArr[lastElement] = i;
lastElement++;
}
}
} else { // There is only one check box (it's not an array)
if (buttonGroup.checked) { // if the one check box is checked
retArr.length = lastElement;
retArr[lastElement] = 0; // return zero as the only array value
}
}
return retArr;
} // Ends the "getSelectedCheckbox" function
function getSelectedCheckboxValue(buttonGroup) {
// return an array of values selected in the check box group. if no boxes
// were checked, returned array will be empty (length will be zero)
var retArr = new Array(); // set up empty array for the return values
var selectedItems = getSelectedCheckbox(buttonGroup);
if (selectedItems.length != 0) { // if there was something selected
retArr.length = selectedItems.length;
for (var i=0; i<selectedItems.length; i++) {
if (buttonGroup[selectedItems[i]]) { // Make sure it's an array
retArr[i] = buttonGroup[selectedItems[i]].value;
} else { // It's not an array (there's just one check box and it's selected)
retArr[i] = buttonGroup.value;// return that value
}
}
}
return retArr;
} // Ends the "getSelectedCheckBoxValue" function
function ShowPopup()
{
//for querystring
var str = document.getElementById("txtUserInput").value;
var url = "SearchResult.aspx?q=" + str;
var win = window.open('','','left=0px, top=0px, width=480px, height=270px, scrollbars=yes, status =no, resizable=yes');
win.location.href = url;
win=null;
return false;
}
</script>
</head>
<body>
<form name="Form1" method="post" action="Default.aspx" id="Form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4MjI3OTA2NjYPZBYCAgMPZBYEAgEPEA9kFgIeB29 uY2xpY2sFG2phdmFzY3JpcHQ6IENoYW5nZU9wdGlvbigpO2RkZ AIFDw9kFgIfAAUYamF2YXNjcmlwdDogU2hvd1BvcHVwKCk7ZGQ kT0lhL1v4IPssUpGkVgFo1g/xkA==" />
</div>
<div>
<table width="100%" border="0">
<tr>
<td align="center">
<br />
<br />
<img src="Images\Roogle.gif" /></td>
</tr>
<tr>
<td align="center">
<table id="rblOption" onclick="javascript
: ChangeOption();" border="0">
<tr>
<td><input id="rblOption_0" type="radio" name="rblOption" value="1" checked="checked" /><label for="rblOption_0">Contact</label></td><td><input id="rblOption_1" type="radio" name="rblOption" value="2" /><label for="rblOption_1">AD</label></td><td><input id="rblOption_2" type="radio" name="rblOption" value="3" /><label for="rblOption_2">IP</label></td><td><input id="rblOption_3" type="radio" name="rblOption" value="4" /><label for="rblOption_3">Host</label></td><td><input id="rblOption_4" type="radio" name="rblOption" value="Job" /><label for="rblOption_4">Job</label></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"><input name="txtUserInput" type="text" id="txtUserInput" style="width:467px;" />
</td>
</tr>
<tr>
<td align="center" style="height: 64px" valign="bottom"><input type="submit" name="btnSearch" value="Roogle Search" onclick="javascript
: ShowPopup();" id="btnSearch" />
<input type="submit" name="btnLucky" value="I'm feeling lucky" id="btnLucky" /></td>
</tr>
<tr>
<td align="center">
Roogle in
<a id="HyperLink1" href="search.aspx?Type=Hostname"><a href="http://www.google.cn">Chinese</a></a></td>
</tr>
<tr>
<td align="center"><p> </p>
<p><a href="http://scotiabank.com">Scotia Bank</a> <a href="http://secres-srv2/default.aspx">IS&C</a> <a href="http://isckpkppz9:8080/sites/TSFS/default.aspx">TS&FS</a></p></td>
</tr>
<tr>
<td align="center"><span class="style8">@2007 Roogle</span></td>
</tr>
</table>
</div>
<INPUT id="htmlID" type="hidden" name="txtID"><INPUT style="DISPLAY: none" type="text" name="txtIgnore">
<input name="ServerID" type="text" id="ServerID" style="DISPLAY: none" /> <br />
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwL+hoTGBQLBidPXDwLAidPXDwLDidPXDwLCidPXDwLooYz TBALO5vm5AwLywc2TBwKln/PuCgKyrt+HAwL5zpiZAnSUKSYh5yoFrrSGtByO9ouY2SEK" />
</div></form>
</body>
</html>
css file:
body, table, div, TR, td
{
font: 8pt verdana;
color: black;
background-color: white;
}
p,th { font-size: 9px; font-weight:bold; color: #666666; line-height: 16px;}
A
{
color:black;
}
a:link { font-size: 9px; font-weight:bold; text-decoration: underline; color: green;}
span. spanTextDropdown{
position: absolute;
top: 0px;
left: 0px;
width: 150px;
z-index: 101;
background-color: #C0C0C0;
border: 1px solid #000000;
padding-left: 0px;
overflow: visible;
display: none;
}
span. spanMatchText
{
text-decoration: underline;
font-weight: bold;
}
span. spanNormalElement
{
background: #ccffff;
}
span. spanHighElement
{
background: #ffcccc;
color: red;
cursor: pointer;
}
span. noMatchData
{
font-weight: bold;
color: #0000FF;
}
2
