Member Avatar for niche1

I have a html script with some JS and a php script that produces a comma delimited string of suggestions of first names to enter into an input field. It only works for "B" names right now. I need to turn this script into a combo box and can't think of a way to process the text string from the php into selectable options in <select> that display below the input field based on what's been entered in the input field. I also want to build on these two scripts if possible.
sug.html

<html>
<head>
<script type="text/javascript">
function showHint(str) {
  if (str.length==0) {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    } else {
   	  // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
  <p><b>Start typing a name in the input field below:</b></p>
  <form>
    First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
  </form>
  <p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

gethint.php

<?php
// Fill up array with names
$a[]="Bob";
$a[]="Brittany";
$a[]="Brian";

//echo var_dump($a) . '<br/>';

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
  {
  $hint="";
  for($i=0; $i<count($a); $i++)
    {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
      {
      if ($hint=="")
        {
        $hint=$a[$i];
        }
      else
        {
        $hint=$hint." , ".$a[$i];
        }
      }
    }
  }

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//output the response
echo $response;

?>
  • 2 Contributors
  • 2 Replies
  • 162 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by niche1
Member Avatar for ddymacek

there are other ways, jquery has an 'autocomplete' feature as well. but you can try something like this...

<?php
// Fill up array with names
$a[]="Bob";
$a[]="Brittany";
$a[]="Brian";

//echo var_dump($a) . '<br/>';

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
$hint = '';
$html = '';
$html = "<select name='firstname' id='firstname'>";
if (strlen($q) > 0) {
	foreach ($a as $key=>$value) {
		if (strpos(strtolower($value), $q) !== false) {
			//echo "$value\n";
			$html .= "<option value=".$value.">".$value."</option>";
			//$hint .= $value . " <br />";
		}
	}	
}
$html .= "</select>";
$hint = $html;
// Set output to "no suggestion" if no hint were found
// or to the correct values

if ($hint == "") {
  $response="no suggestion";
} else {
  $response=$hint;
}

//output the response
echo $response;
?>
Member Avatar for niche1

Outstanding! That was part the breakthrough I was looking for. Now I's like to get the I changed your script from <select> and <option> to <div> and <a> (see below).

How do I get the selected anchor value into the input field?

<?php
    // Fill up array with names
    $a[]="Bob";
    $a[]="Brittany";
    $a[]="Brian";
     
    //echo var_dump($a) . '<br/>';
     
    //get the q parameter from URL
    $q=$_GET["q"];
     
    //lookup all hints from array if length of q>0
    $hint = '';
    $html = '';
    $html = "<div name='firstname' id='firstname'>";
    if (strlen($q) > 0) {
    foreach ($a as $key=>$value) {
    if (strpos(strtolower($value), $q) !== false) {
    //echo "$value\n";
    $html .= "<a style=\"text-decoration:none;\" href=".$value." value=". $value . " >".$value."</a></br>";
    //$hint .= $value . " <br />";
    }
    }
    }
    $html .= "</div>";
    $hint = $html;
    // Set output to "no suggestion" if no hint were found
    // or to the correct values
     
    if ($hint == "") {
    $response="no suggestion";
    } else {
    $response=$hint;
    }
     
    //output the response
    echo $response;
    ?>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.