display input hints in a menu under text field

[Notretsam]

This is a mix of PHP, mysqli and Javascript but decided to post it in PHP areas as its what I know.

 

You can see from attached image , that I have code that outputs hints as someone is typing in text field. I have no idea how to display the hints in same way google search engine does, a nice neat menu underneath the text field.

 

 

I have code that I found on the web and have adapted it from mysql over to mysqli

 

Am hoping someone can actually tell me step by step how to achieve what am looking to do, as I really have no idea how to do it myself.

 

Below is the code that I have.

<input type="text" name="shoAcc" value="<?php echo "$biomsg"; ?>" size="30" class="edit" maxlength="45" onkeyup="showshoutHint(this.value)">

You can see the showshoutHint that triggers the javascript function below

  <script>function showshoutHint(str){if (str.length==0)  {   document.getElementById("txtshoutHint").innerHTML="";  return;  }var xmlhttp=new XMLHttpRequest();xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("txtshoutHint").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","theme/gethint.php?q="+str,true);xmlhttp.send();}</script>

I don't know javascript but able to view above snippet I found online and see how it generally works, it triggers the following code contained in gethint.php

// Create connection$conn = new mysqli($host, $user, $password, $database);// Check connectionif ($conn->connect_error) {    die("Connection failed: " . $conn->connect_error);}    /* create a prepared statement */   $stmtgethintwrest = $conn->prepare("SELECT wrestlerName FROM memberInfo ORDER BY wrestlerName");    /* bind parameters for markers */    $stmtgethintwrest->bind_param;    /* execute query */    $stmtgethintwrest->execute();    $stmtgethintwrest->bind_result($wrestlerName);    /* fetch value */   while ($row = $stmtgethintwrest->fetch()) {      $a[]="$wrestlerName";	}// get the q parameter from URL$q=$_REQUEST["q"]; $hint="";// lookup all hints from array if $q is different from "" if ($q !== "")  { $q=strtolower($q); $len=strlen($q);    foreach($a as $name)    { if (stristr($q, substr($name,0,$len)))      { if ($hint==="")        { $hint=$name; }        else        { $hint .= "<option value='$name'>$name</option>"; }      }    }  }    /* close statement */	$stmtgethintwrest->close();// Output "no suggestion" if no hint were found// or output the correct values echo $hint==="" ? "no suggestion" : $hint;

The above code was also part of snippet I found online, but it used mysql_ , an changed it over to mysqli_

 

As you can see the line with <option> is the output which below code shows on page with text field you see in attached image.

<div id='txtshoutHint'></div>

I thought within the $hint var being set I could maybe display it within a select forum field underneath the text field, not a preferred option but nope didn't work.

 

Since this isn't fully my code, pretty much most of it isn't , not certain how I can adapt it and show a menu list underneath the text field with the hint listed in it.

 

I do have javascript coding that I use to popup a window with information in it, yet another snippet I found on the web. Thought maybe I could use this, but it has specific settings for where window pops up, an doesn't seem to allow me to select specific area in page and am not convinced creating another window is the right idea.

 

Really hope someone can actually just provide the coding needed to adapt what I have into what am needing, but is a lot to ask, so at least, hope someone can point me in direction of doing it myself.

 

I don't know javascript and more familiar with PHP , so solution preferable in PHP but suspect it is done with javascript but not sure.

[justsomeguy]

It's pretty much CSS. You can style that element so that it floats over the other elements, has a border, etc. CSS positioning.

[Notretsam]

ah ok , that sounds much simpler than I thought it would be, I know CSS and never considered adding class to <div> tag , which I presume is where it would go.

 

its 7.33pm here for me, so have look into that tomorrow.

[Notretsam]

finally got around to trying this and was simple enough , small problem though

 

 

as you can see the first result for some reason is off , the <br> tag isn't taken effect and neither is the wrapped <a href= tag

 

below is the coding

<?php// Create connection$conn = new mysqli($host, $user, $password, $database);// Check connectionif ($conn->connect_error) {    die("Connection failed: " . $conn->connect_error);}    /* create a prepared statement */   $stmtgethintwrest = $conn->prepare("SELECT wrestlerName FROM memberInfo ORDER BY wrestlerName");    /* bind parameters for markers */    $stmtgethintwrest->bind_param;    /* execute query */    $stmtgethintwrest->execute();    $stmtgethintwrest->bind_result($wrestlerName);    /* fetch value */   while ($row = $stmtgethintwrest->fetch()) {      $a[]="$wrestlerName";	}// get the q parameter from URL$q=$_REQUEST["q"]; $hint="";// lookup all hints from array if $q is different from "" if ($q !== "")  { $q=strtolower($q); $len=strlen($q);    foreach($a as $name)    { if (stristr($q, substr($name,0,$len)))      { if ($hint==="")        { $hint=$name; }        else        { $hint .= "<a href=''>$name</a><br>"; }      }    }  }    /* close statement */	$stmtgethintwrest->close();// Output "no suggestion" if no hint were found// or output the correct values echo $hint==="" ? "no suggestion" : $hint;?>

[justsomeguy]

The first name doesn't have a br after it, or an a tag. The other a tags don't have a link in them.

[Notretsam]

oh duh , see it now , thanks again

 

yeah didn't put a link within the a tag as off yet.