at0mic Posted May 30, 2011 Share Posted May 30, 2011 Here's a simple Ajax Live Search which works perfectly. When the page loads, the results are empty. As you type in the text field, the results start to appear and they decrease and you type in more text. If you delete the text from the text field, all the results are shown. How can I change it so that all the database results are shown when the page is loaded and then start to disappear as you type? index.htm <html> <head> <title></title> <script> function open_xmlhttp_stream() { var xmlhttp = false; try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}catch(e){xmlhttp = false;}} if(!xmlhttp && typeof XMLHttpRequest!='undefined'){try{xmlhttp = new XMLHttpRequest();}catch(e){xmlhttp=false;}} if(!xmlhttp && window.createRequest){try{xmlhttp = window.createRequest();}catch(e){xmlhttp=false;}} return xmlhttp; } function get_results(v) { var my_request = open_xmlhttp_stream(); var url = 'get_results.php?search='+v; my_request.open("GET",url,true); my_request.onreadystatechange=function() { if(my_request.readyState==4 && my_request.status==200) { document.getElementById("query_results").style.visibility="visible"; document.getElementById("query_results").innerHTML = my_request.responseText; if(!document.getElementById("query_results").innerHTML) { document.getElementById("query_results").style.visibility="hidden"; } document.getElementById("input_value").innerHTML = v; } } my_request.send(null); } </script> </head> <body> <form method="POST"> <input id="search" type="text" name="search" onkeyup="get_results(this.value);"> <div id="input_value"></div> <div id="query_results"></div> </form> </body> </html> get_results.php <?php include ('../includes/config.php'); $search = $_GET["search"]; $query = "SELECT name FROM staff WHERE name LIKE '%{$search}%'"; $result = mysql_query($query) or die(mysql_error()); while ($row = mysql_fetch_array($result)) { echo $row['name']. "<br />"; } ?> Quote Link to comment Share on other sites More sharing options...
seanlim Posted May 30, 2011 Share Posted May 30, 2011 Add this somewhere within your script tags: window.onload = function(){get_results(document.getElementById("search").value);}; Quote Link to comment Share on other sites More sharing options...
at0mic Posted May 30, 2011 Author Share Posted May 30, 2011 seanlim thats excellent. Thank you so much Quote Link to comment Share on other sites More sharing options...
seanlim Posted May 30, 2011 Share Posted May 30, 2011 You're welcome! Looking at it again, it might be sufficient to do window.onload = function(){get_results('');}; if you are always expecting the search field to be empty and want to display all the results when the page loads. Quote Link to comment Share on other sites More sharing options...
at0mic Posted May 30, 2011 Author Share Posted May 30, 2011 I just tried that out and it still works ok. I always like it when code can be shortened so thanks again. Quote Link to comment Share on other sites More sharing options...
at0mic Posted May 31, 2011 Author Share Posted May 31, 2011 One more question, I've got the search field in a php file with GET data in the URL. How can I access the GET data from the get_results.php page? I've tried adding it to the URL in the javascript as PHP variables like the following: var url = 'get_results.php?data=<?php $_GET['data'] ?>&search='+v; But it doesn't seem to work. Any ideas? Quote Link to comment Share on other sites More sharing options...
seanlim Posted June 1, 2011 Share Posted June 1, 2011 How are you accessing the GET data? The JS seems right, so this is more of a PHP problem actually Quote Link to comment Share on other sites More sharing options...
at0mic Posted June 1, 2011 Author Share Posted June 1, 2011 I'm accessing the GET data using: echo $_GET['data']; If I use plain text in the URL like in the following example, I can echo the GET data from the target php page. var url = 'get_results.php?data=phpfreaks&search='+v; However, if use a php variable, I cant access it from the target php page. Also, I've noticed that even with the original code, I get an error in Internet Explorer which appears at the bottom left of the window next to "Done" but the live search still works ok. Message: 'document.getElementById(...)' is null or not an object Line: 32 Char: 4 Code: 0 Line 32 contains the following: document.getElementById("input_value").innerHTML = v; Quote Link to comment Share on other sites More sharing options...
seanlim Posted June 2, 2011 Share Posted June 2, 2011 You missed out the echo: var url = 'get_results.php?data=<?php echo $_GET['data']; ?>&search='+v; If there are any errors in IE with Firefox/Chrome not throwing up any errors, I believe it's cos of its own quirks... What version are you using? Quote Link to comment Share on other sites More sharing options...
at0mic Posted June 7, 2011 Author Share Posted June 7, 2011 Yes you're right, I cant believe I forgot the echo. It works now thanks. I'm mostly using IE7 and IE8. I haven't tested it with IE6 yet. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.