Databases
StackOverflow2013
Postsdbo
POPHP Search: Using Jquery to alter a php a value
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPHP Search: Using Jquery to alter a php a value
    text
    copied!<p>I have a comics website. A feature it has is to allow users to search comics... the search will instantly parse the input and return thumbnail results based on matching title and keywords.</p> <p>Originally, the search would return all of the results, and the bounding search box would expand infinitely downward, holding every single comic result. I thought it may be a nice touch to limit the results to 4, and display a message like "load 5 remaining images" if the user chooses to do so.</p> <p>If they click on that message, I wanted limiting php variable to be removed or changed.</p> <p>So far, it loads with the limit, and shows a link... </p> <p><img src="https://i.stack.imgur.com/7si1I.png" alt="enter image description here"></p> <p><strong>EDIT: Latest Code:</strong></p> <p><strong>search_field.php (the search file that get's included on a page... this file calls search.php via JQuery):</strong></p> <pre><code>&lt;?php $site = (isset($_GET['site']) ? ($_GET['site']) : null); ?&gt; &lt;div id="sidebar" class="searchborder"&gt; &lt;!--Allow users to search for comic--&gt; &lt;!--&lt;span class="search"&gt;Search for &lt;?php// echo (($site == "artwork") ? 'artwork' : 'a comic'); ?&gt; &lt;/span&gt;--&gt; &lt;script type="text/javascript"&gt; function GetSearch(mySearchString){ $.get("./scripts/search.php", {_input : mySearchString, _site : '&lt;?php echo $site ?&gt;'}, function(returned_data) { $("#output").html(returned_data); } ); } &lt;/script&gt; &lt;center&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;span class="search"&gt; &lt;img src="./images/SiteDesign/Search.png" /&gt; &lt;input type="text" onkeyup="GetSearch(this.value)" name="input" value="" /&gt; &lt;!--&lt;input id="site" type="hidden" value="&lt;?php// echo $site; ?&gt;"&gt;--&gt; &lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/center&gt; &lt;span id="output"&gt; &lt;/span&gt; &lt;/div&gt; </code></pre> <hr> <p><strong>search.php, the file that's called to parse the string and return the results:</strong></p> <pre><code>&lt;?php //Query all images: include 'dbconnect.php'; $site = $_GET['_site']; $input = (isset($_GET['_input']) ? ($_GET['_input']) : 0); $siteChoice = (isset($_GET['_choice']) ? ($_GET['_choice']) : $site); $start = (isset($_GET['_start']) ? ($_GET['_start']) : null); echo "start: " . $start; //if user goes to hittingtreeswithsticks.com... no "site" value will be set... so I need to set one if ($site == null) { $site = "comics"; } if ($siteChoice == "artwork") { $sql = "SELECT id, title, keywords, thumb FROM artwork"; $thumbpath = "./images/Artwork/ArtThumbnails/"; } else if ($siteChoice == "comics") { $sql = "SELECT id, title, keywords, thumb FROM comics"; $thumbpath = "./images/Comics/ComicThumbnails/"; } else { $sql = "SELECT id, title, keywords, thumb FROM $site"; if ($site == "artwork") { $thumbpath = "./images/Artwork/ArtThumbnails/"; } else { $thumbpath = "./images/Comics/ComicThumbnails/"; } } /* For this to work, need all comics replicated in an "All Comics" file along with "All Thumbnails" else { $sql = "SELECT id, title, thumb FROM comics UNION SELECT id, title, thumb FROM artwork"; $thumbpath = "./images/AllThumbnails/"; }*/ $imgpaths = $mysqli-&gt;query($sql); mysqli_close($mysqli); $idresult = array(); $imgresult = array(); $thumbresult = array(); //CHECK IF $INPUT == IMAGE PATH if (strlen($input) &gt; 0) { while ($row = $imgpaths-&gt;fetch_assoc()) { //query against key words, not the image title (no one will remember the title) if (stripos($row['keywords'], $input) !== false || strtolower($input)==strtolower(substr($row['title'],0,strlen($input)))) //if (strtolower($input)==strtolower(substr($row['title'],0,strlen($input)))) { array_push($idresult, $row['id']); array_push($imgresult, $row['title']); array_push($thumbresult, $row['thumb']); } } //ECHO RESULTS ARRAY if(count($imgresult) == 0) { echo "&lt;p&gt;no suggestions&lt;/p&gt;"; } else { echo "&lt;ul&gt;"; $k = 0; $max = 4; if (count($imgresult) &gt; $max) { while ($k &lt; count($imgresult) &amp;&amp; $k &lt; $max) { echo '&lt;li&gt; &lt;span class="sidebarimages"&gt;&lt;a href=".?action=viewimage&amp;site=' . $siteChoice . '&amp;id=' . $idresult[$k] . '"&gt; &lt;img src="./scripts/thumber.php?img=.'.$thumbpath.$thumbresult[$k].'&amp;mw=90&amp;mh=90"/&gt;&lt;/a&gt;&lt;/span&gt; &lt;/li&gt;'; $k++; } $difference = count($imgresult)-$k; echo "&lt;br/&gt;&lt;i&gt;&lt;a href='.?action=homepage&amp;site=" . $siteChoice . "&amp;start=4' class='loadSearch'&gt;load " . $difference . " more result" . (($difference != 1) ? 's' : '') . "... &lt;/a&gt;&lt;/i&gt;"; } else { while ($k &lt; count($imgresult)) { echo '&lt;li&gt; &lt;span class="sidebarimages"&gt;&lt;a href=".?action=viewimage&amp;site=' . $siteChoice . '&amp;id=' . $idresult[$k] . '"&gt; &lt;img src="./scripts/thumber.php?img=.'.$thumbpath.$thumbresult[$k].'&amp;mw=90&amp;mh=90"/&gt;&lt;/a&gt;&lt;/span&gt; &lt;/li&gt;'; $k++; } } echo "&lt;/ul&gt;"; } } ?&gt; &lt;script type="text/javascript"&gt; $(".loadSearch").click(function() { //alert("Test"); $.get("./search.php", {_start : 4}, function (returned_data) { $("#moreResults").html(returned_data); } ); }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload