fssnerd Posted December 18, 2011 Share Posted December 18, 2011 Hello, I wanted to learn some Ajax and create a virtual packing list (using PHP and mySQL) which allows auto complete using Ajax. I load the packing list items into a form, then using Ajax, user types in part of all of an item number. As they type, it displays valid items from the packing list using the keys they have typed. I am missing how to get it to jump to an item within the form once they have selected the item. I am missing something fundamental here, I just don't know what. Yes, I am a just a newbie, so please no flames. I am hoping someone can gently point me in the right direction. Thank you. Code samples: packinglist.php <html> <head> <title>Store P.O. receiving</title> <script language="JavaScript" type="text/javascript" src="scripts/suggest.js"></script> </head> <body> <center> <?php if (isset($_POST['submit'])) { echo "Nice Choice!<br>"; } ?> <form id="suggestSearch" action="<?php $PHP_SELF ?>" method="post"> Item Search: <input type="text" id="poitemcode" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off"/><input type="submit" value="Jump to item"> <div id="layer1"></div><br> </form> </center> <!----------------------------------------------------------------------------> <?php include_once "/var/www/database_login.php"; include_once "functions/storepo_functions.php"; if(!($connection = mysql_connect("localhost", "$dbuser", "$dbpass"))) { echo mysql_error() . "\n"; exit(); } list ($MyLocid, $MyLocation) = GetLocation(); ?> <center> <h3>Receive CAM shipment</h3> <br> <!-----------------------------------------------------------------------------> <?php echo "<center><caption> Store# " . $MyLocid . " " . $MyLocation . "\n"; echo date('F d Y @ H:i:s'); ?> <table border="1" cellpadding="5%" cellspacing="0" bgcolor="#FFFFAA"> <tr><th> Item Number </th><th> Description </th><th> Unit </th><th> Remarks </th><th> Sent </th><th> Found </th><th> Part </th><th> All </th></tr> <?php if(!($connection = mysql_connect("localhost", "$dbuser", "$dbpass"))){ echo mysql_error() . "\n"; exit(); } $db_selected = mysql_select_db("intranet"); $result = mysql_query ("SELECT polocation, podate, ponum, polinenum, poitemcode, poitemdesc, poitemuom, poremarks, poshipqty, porcvqty FROM storepo ORDER BY poitemcode ASC" , $connection); while (list($polocation, $podate, $ponum, $polinenum, $poitemcode, $poitemdesc, $poitemuom, $poremarks, $poshipqty, $porcvqty) = mysql_fetch_row($result)) { $pokey = $polocation; echo "<tr>" ; echo "<td align=center>" . $poitemcode . "</td><td align=center>" . $poitemdesc . "</td><td align=center>" . $poitemuom . "</td><td align=right>" . $poremarks . "</td><td align=center>" . $poshipqty . "</td><td align=center>" . $porcvqty . "</td>"; echo "<td>"; echo "<form action=\"edit_storepo_item.php\" method=\"post\">" . "<input type=\"submit\" name=\"submit\" value=\"Partial\">" . "<input type=\"hidden\" name=\"pokey\" value=\"$pokey\">" . "<input type=\"hidden\" name=\"action\" value=\"Partial\"></form></td>"; echo "<td>"; echo "<form action=\"edit_storepo_item.php\" method=\"post\">" . "<input type=\"submit\" name=\"submit\" value=\"All\">" . "<input type=\"hidden\" name=\"pokey\" value=\"$pokey\">" . "<input type=\"hidden\" name=\"action\" value=\"All\"></form></td>"; echo "</tr>" ; } mysql_close($connection); echo "</center></pre></table><hr>"; ?> </body> </html> ... suggest.js if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if(window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Your Browser Sucks!"); } } //Our XmlHttpRequest object to get the auto suggest var searchReq = getXmlHttpRequestObject(); //Called from keyup on the search textbox. //Starts the AJAX request. function searchSuggest() { if (searchReq.readyState == 4 || searchReq.readyState == 0) { var str = escape(document.getElementById('poitemcode').value); searchReq.open("GET", 'functions/searchSuggest.php?search=' + str, true); searchReq.onreadystatechange = handleSearchSuggest; searchReq.send(null); } } //Called when the AJAX response is returned. function handleSearchSuggest() { if (searchReq.readyState == 4) { var ss = document.getElementById('layer1'); var str1 = document.getElementById('poitemcode'); var curLeft=0; if (str1.offsetParent){ while (str1.offsetParent){ curLeft += str1.offsetLeft; str1 = str1.offsetParent; } } var str2 = document.getElementById('poitemcode'); var curTop=20; if (str2.offsetParent){ while (str2.offsetParent){ curTop += str2.offsetTop; str2 = str2.offsetParent; } } var str =searchReq.responseText.split("\n"); if(str.length==1) document.getElementById('layer1').style.visibility = "hidden"; else ss.setAttribute('style','position:absolute;top:'+curTop+';left:'+curLeft+';width:150;z-index:1;padding:5px;border: 1px solid #000000; overflow:auto; height:105; background-color:#F5F5FF;'); ss.innerHTML = ''; for(i=0; i < str.length - 1; i++) { //Build our element string. This is cleaner using the DOM, but //IE doesn't support dynamically added attributes. var suggest = '<div onmouseover="javascript:suggestOver(this);" '; suggest += 'onmouseout="javascript:suggestOut(this);" '; suggest += 'onclick="javascript:setSearch(this.innerHTML);" '; suggest += 'class="small">' + str[i] + '</div>'; ss.innerHTML += suggest; } } } //Mouse over function function suggestOver(div_value) { div_value.className = 'suggest_link_over'; } //Mouse out function function suggestOut(div_value) { div_value.className = 'suggest_link'; } //Click function function setSearch(value) { document.getElementById('poitemcode').value = value; document.getElementById('layer1').innerHTML = ''; document.getElementById('layer1').style.visibility = "hidden"; } ... Searchsuggest.php <?php //Get our database abstraction file require('database.php'); if (isset($_GET['search']) && $_GET['search'] != '') { //Add slashes to any quotes to avoid SQL problems. $search = $_GET['search']; $suggest_query = db_query("SELECT distinct(poitemcode) as suggest FROM storepo WHERE poitemcode like('" .$search . "%') ORDER BY poitemcode"); while($suggest = db_fetch_array($suggest_query)) { echo $suggest['suggest'] . "\n"; } } ?> Link to comment https://forums.phpfreaks.com/topic/253411-what-part-am-i-missing/ Share on other sites More sharing options...
scootstah Posted December 19, 2011 Share Posted December 19, 2011 What do you mean by "jump to an item"? Link to comment https://forums.phpfreaks.com/topic/253411-what-part-am-i-missing/#findComment-1299195 Share on other sites More sharing options...
fssnerd Posted December 21, 2011 Author Share Posted December 21, 2011 Thanks for the reply! The form represents a very long packing list for a shipment. My desire is to use the Ajax/autocomplete function to place the user at the item within the form. If this were a non-Ajax project, I would have the form call itself with submit 'SELF', etc and then have it jump to the item using some anchors within the form. I am missing something fundamental in how to implement the Ajax function to help the user navigate to the item within the very long form. Thanks in advance for any advice/direction! Link to comment https://forums.phpfreaks.com/topic/253411-what-part-am-i-missing/#findComment-1299988 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.