How can I make BOLD just the query terms that users have typed in the search box?
I am referring to every single keywords in every single search results.
Like when you type a search terms, and the result page will give you all the results but the term that you have typed is in bold inside every single result.
As you can see, I do have already a code inside the page that suppose to make bold the terms but it does not work.
This is my complete code of my search page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CLIHELP - Help for Command Line Interface</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta charset="utf-8">
<meta name="description" content="Help for Command Line Interface">
<meta name="author" content="clihelp.org">
<style>
/* Generated by http://www.cssportal.com */
@import url("reset.css");
body {
font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
font-size: 13px;
color:#333
}
p {
padding: 10px;
}
#wrapper {
width: 1000px;
}
#navigation {
float: left;
height: 30px;
width: 1000px;
background: #F2F2F2;
}
#content {
float: left;
background: #FFFFFF;
width: 600px;
padding: 5px 20px 5px 20px;
line-height: 18px;
}
#rightcolumn {
width: 336px;
float: left;
}
#footer {
height: 30px;
width: 1000px;
background: #F2F2F2;
clear: both;
}
.navmenu {
background-color: #F2F2F2;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
}
.navmenu li:last-child {
margin-left: auto;
}
.navmenu ul li a {
text-decoration: none;
margin: 4px;
padding: 5px 20px 5px 20px;
color: #FFFFFF;
background: #4285F4;
display: inline-block;
}
.feedback-search {
font-size: 13px;
}
.feedback-search a {
text-decoration: none;
}
.feedback-search a:hover {
text-decoration: underline;
}
.feedback-search a:visited {
color: blue;
}
.title {
font-size: 18px;
}
.title a {
text-decoration: none;
}
.title a:hover {
text-decoration: underline;
}
.title a:visited {
color: blue;
}
.tags {
font-size: 13px;
color: #006621;
}
.script {
font-size: 13px;
}
ul.dashboard {
list-style-type: square;
line-height: 18px;
list-style-position:inside;
}
.dashboard a {
text-decoration: none;
}
.dashboard a:hover {
text-decoration: underline;
}
.dashboard a:visited {
color: blue;
}
p.dashboard {
font-weight: bold;
}
.footermenu ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
}
.footermenu ul li a {
text-decoration: none;
margin: 4px;
padding: 5px 20px 5px 20px;
display: inline-block;
}
.your-search {
font-weight: bold;
}
input:focus {
background-color: yellow;
}
</style>
</head>
<body>
<?php include_once("analyticstracking.php") ?>
<div id="wrapper">
<div id="navigation">
<div class="navmenu">
<ul id=menu>
<li><a href="http://www.clihelp.org">Clihelp</a></li>
<li><a href="https://github.com/clihelp/dev_clihelp">GitHub</a></li>
<li><form action='q.php' method='GET'>
<input type='text' size='25' name='search' autofocus>
<input type='submit' style='position: absolute; left: -9999px' name='submit'/>
</form></li>
</ul>
</div>
</div>
<div id="content">
<?php
$button = $_GET ['submit'];
$search = $_GET ['search'];
if (!$button)
echo "you didn't submit a keyword";
else {
if (strlen($search) <= 1)
echo "Search term too short";
else {
echo "<p>Your search - <span class='your-search'>$search</span> ";
mysql_connect("localhost", "username", "password");
mysql_select_db("DB");
$search_exploded = explode(" ", $search);
foreach ($search_exploded as $search_each) {
$x++;
if ($x == 1)
$construct .= "(CONCAT(code,cliCommandId) LIKE '%$search_each%' OR os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%') ";
else
$construct .= "AND (CONCAT(code,cliCommandId) LIKE '%$search_each%' OR os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%')";
}
$construct = "SELECT * FROM cliCommand WHERE $construct";
$run = mysql_query($construct);
$foundnum = mysql_num_rows($run);
if ($foundnum == 0)
echo "- did not match any documents.</br></br>Suggestions:</br></br>- Make sure all words are spelled correctly.</br>- Try different keywords.</br>- Try more general keywords.</br>- Search by id.";
else {
echo "- About $foundnum results - <span class='feedback-search'><a href=''>Give us Feedback about this result</a></span><br><br>";
while ($runrows = mysql_fetch_assoc($run)) {
$cliCommandId = $runrows ['cliCommandId'];
$code = $runrows ['code'];
$os = $runrows ['os'];
$title = $runrows ['title'];
$tags = $runrows ['tags'];
$script = $runrows ['script'];
if (strlen($script) > 160) {
$script = substr($script, 0, 160) . "..."; // do we need to add ...
}
$script = str_bold($script);
echo "
<div class='title'><a href='script.php?cliCommandId=$cliCommandId&code=$code'>$title</a></div>
<span class='tags'>$tags</span><br>
$script<br>
<p>
";
}
}
}
}
function str_bold($str, $text)
{
$search_exploded = explode(" ", $_GET ['search']);
foreach ($search_exploded as $search_each) {
$str = preg_replace("/$search_each/i", '<b>$0</b>', $str);
}
return $str;
}
?>
</div>
<div id="rightcolumn">
<p><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280 Large Rectangle -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="-------"
data-ad-slot="--------"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
<p class="dashboard">Latest Linux updates: under construction</p>
<ul class="dashboard">
<li><a href="">Configure Your Existing AD Forest and Domain</a></li>
<li><a href="">Install Other Roles and Features on Windows Server 2008 R2 Server Core</a></li>
<li><a href="">Start the DNS service</a></li>
</ul>
<br>
<p class="dashboard">Latest macOS updates: under construction</p>
<ul class="dashboard">
<li><a href="">Configure Your Existing AD Forest and Domain</a></li>
<li><a href="">Install Other Roles and Features on Windows Server 2008 R2 Server Core</a></li>
<li><a href="">Start the DNS service</a></li>
</ul>
<br>
<p class="dashboard">Latest Windows updates: under construction</p>
<ul class="dashboard">
<li><a href="">Configure Your Existing AD Forest and Domain</a></li>
<li><a href="">Install Other Roles and Features on Windows Server 2008 R2 Server Core</a></li>
<li><a href="">Start the DNS service</a></li>
</ul>
<br>
</div>
<div id="footer">
<div class="footermenu">
<ul id=menu>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
