Ajax Search as You Type issue

[tsoltysiak]

Hi, I posted this question on another forum but haven't had any replies, so I figured I would ask here, as I got some great help with my other issues here.

I have an Ajax script that filters results onKeyUp, but it does not work for me in IE (I've just tried using IE 8, haven't tried others yet). It works fine in Firefox. The thing is, I'm using a very similar script for another search as you type Ajax update filter, which works in both Firefox and IE. I'm not sure is there something wrong with my script, or just my IE isn't working properly. Here is the code for it:

Javascript

<script language="javascript" type="text/javascript">

function ajaxListSearchSpecialFunction(s){
    var ajaxRequest;  // The variable that makes Ajax possible!
   
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }


ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
  var SearchListDisplay = document.getElementById('searchspeciallist');
            SearchListDisplay.innerHTML = ajaxRequest.responseText;
    }
}
var s = document.getElementById('specialsearchbox').value;
    var queryString = "?s=" + s + "&categoryid=<?php echo $categoryid;?>";
    ajaxRequest.open("GET", "searchspeciallist.php" + queryString, true);
ajaxRequest.send(null);
}

</script>

The Search As You Type Form

<form name="listfilterspecialform" method="get">
<input type="hidden" name="categoryid" value="<?php echo $categoryid;?>">
<input class="largesearch" type="text" id="specialsearchbox" autocomplete="off"
value="<?php if(isset($_GET['s']))
                               {echo $_GET['s'];}
                               else {echo "Search Airlines";}?>"
 name="s" onfocus="if(this.value=='Search Airlines')this.value='';"
onblur="if(this.value=='')this.value='Search Airlines';" onkeyup="ajaxListSearchSpecialFunction('');"/>
</form>

The part of the page that is meant to be updating

<tbody id="searchspeciallist">
<?php include "searchspeciallist.php"?>
</tbody>

I know it's not an issue with searchspeciallist.php, because when the form is submitted manually, by pressing enter and the page reloading, the results are filtered the way they should be, so I'm guessing it must besomething to do with the javascript. The thing is, I'm using the same script for a search as you type on another part of the same page, which is working fine.


If you want to test it out, an example of it can be found over here:
http://www.airline-luggage-regulatio...s&categoryid=1

The Search as you Type field in the left column is working. It's the one in the main column (large "Search Airlines" input field as you scroll down a few cm), which is meant to filter the table shown below it, is the one that is not working. Is it just me that it's not working for, or an issue with the code not working for anyone using IE? Chrome and Firefox both work flawlessly.

Thanks a lot,
Tom

[jscheuer1]

You've got two javascript problems. One affects all browsers but isn't as far as I can tell a fatal error in any of them:

<script type="text/javascript">
function clearDefault(el) {
  if (el.defaultValue==el.value) el.value = ""
}

function replaceDefault(el){
  if (el.defaultValue==el.value)} el.value = "Search Airlines"
</script>

The entire above script doesn't appear to be used at all, so I'd just get rid of it. The highlighted part is the error though, it should be:

function replaceDefault(el){
  if (el.defaultValue==el.value) el.value = "Search Airlines"}

The other is IE only. IE hates writing to tables. You may be able to get it to do that if you are really careful and/or clever as to how you go about it. But here (which you show in your post):

ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
  var SearchListDisplay = document.getElementById('searchspeciallist');
            SearchListDisplay.innerHTML = ajaxRequest.responseText;
    }
}

using the innerHTML property of a tbody element:

<tbody id="searchspeciallist">
<?php include "searchspeciallist.php"?>
</tbody>

to write to it is either not clever (perhaps too clever), and/or not careful enough for IE.

If you could write the entire table to a containing div:

<div id="searchspeciallist">
<table>
<tr>
<th>Airline</th>
<th>Takes Bikes?</th>
<th>Included in Allowance?</th>
<th>Cost</th>
<th>Policy/Comments</th>
<th>Policy Rating</th>
</tr>
<tbody>
<?php include "searchspeciallist.php"?>
</tbody>

<script type="text/javascript">
function showpolicy(cellid){
document.getElementById(cellid).style.display = (document.getElementById(cellid).style.display != "table-row" ? "table-row" : "none");
}
</script>
</table>
</div>

Then it will work. The searchspeciallist.php page will need to be modified to write the entire table, rather than just the contents of its tbody element.

Also notice the highlighted script. That doesn't need to be there. It could just as easily be in the head of the page. At the very least, outside of the table, as its being there will probably cause some problems with it and/or the solution I'm proposing, once you implement said solution. And it can work just fine from somewhere else (preferably in the head).

Further, as table-row can cause problems as a display value in some browsers, it should be rewritten as:

<script type="text/javascript">
function showpolicy(cellid){
	var s = document.getElementById(cellid).style;
	s.display = s.display === 'none'? '' : 'none';
}
</script>

[tsoltysiak]

Perfect, thanks for your help John!

It seems it was the writing to a table that it didn't want to do, so I moved the entire table to searchspeciallist.php, and put it into a div as you recommended.

I also made the other changes you suggested, and they're working well. I don't think I had any issues with the way they were before, but I'd rather not risk it in the future, so thanks for the help.

Tom

[jscheuer1]

Just as a side note, my final suggestion in my last post is to accommodate situations that may not arise for your page. However, one can never be certain, and I think I did notice some irregularities with it in Opera (my default browser) when I first viewed the page. It's fine in that browser now.

It takes advantage of the fact that we don't need to know the browser or its default display value for tr. Because all of the targeted tr's are initially set inline to display: none; - simply removing that, setting it to an empty string (''), will force the browser to use its own default value.

It also makes things a bit more efficient visa vis only having to access the element and its style property once per execution.

And (as for moving it to the head), once you move the entire table to an external file to be written/overwritten, there is no telling what effect that might have on the availability and workings of that function. Likely it would be fine on page load, it's after that part is removed and reinserted that concerns me.