I don’t understand how to change this html from displaying a string to displaying relevant suggestions in a drop down format that when clicked will fill the input box. How do I do that?
<body>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
You appear to be getting there 
You can refer to the span’s text using the “this” keyword to refer to the span object and its innerHTML which will be the text.
try:
<span onclick="document.getElementById('field2').value=this.innerHTML">Link text</span>
“Link text” should then be set to the value of the input box with id field2.
Thanks, but can’t the scripts I’ve posted be modified. I understand them and need to use them to better understand how and why they need to be changed. That’s ok isn’t it?
If so, I was told to change this line: document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
Couldn’t I just leave that as is and do all the formatting in the php script? I’m obviously new to JS though I’m way less challenged by php.
if so what would the <select> tag look like?
See Modern Combo Boxes for how to create a combo box using an input form and a list with JavaScript to tie them together.
I think i’m going in the right direction, but not there yet. How do I get the <span> text into field2 instead of field1 text into field2?
by modifying this script?
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!" />
<br />
Field2: <input type="text" id="field2" />
<br /><br />
Click the button to copy the content of Field1 to Field2.
<br />
<span onclick="document.getElementById('field2').value=document.getElementById('field1').value">Link text</span>
</body>
</html>
$html .= "<a style=\\"text-decoration:none;\\" href=".$value." value=". $value . " >".$value."</a></br>";
The above html is invalid because the <a> element does not have an attribute called value.
To get the text in the link copied to the input box, assign an onclick event handler to take the link’s text and assign it to the value property of the input box. This is done with javascript.
This implies you have written the code to create the <select> and its <options> based on the returned names.
Can you post at least that code and then someone can show you how to add the onchange.
I’ve played around with this for awhile and I don’t understand how to work the onchange event handler into <select> and how that’s going to get what’s selected into the input box. Can you show me please?
let’s talk about it both ways. first however, here’s my current php file. It displays a wrapper div under the input field with anchors in it, but I don’t know how the get the anchor values into the input field when one is selected. How do i do that?
<?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\
";
$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;
?>
That depends on whether you want the hints displayed with or without a page refresh.
If you want a page refresh then you can easily do it all in php and remove your ajax code. If you don’t want a page refresh then you will need to use AJAX, as you are currently doing, and make the changes I suggested earlier.
ok, so xmlhttp.responseText will contain a list of names separated by a comma based on the user input.
You then need to change this line
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
to create either links (<a> elements) or the option elements for a <select> using the names in xmlhttp.responseText
If you decide to use <a>'s then you will need to add an onclick event handler to each <a> to transfer the clicked name to the input box. If you decide to use a <select>, it will need an onchange event handler to transfer the clicked name to the input box.
This sounds like a homework exercise, so give it a go and if you get stuck post back with your updated code and someone will try to help.
I want to change from suggestions abs an unselectable string to something selectable.
<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>
```html
```php
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//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;
?>
There are numerous ways this can be done.
Can you post the code you have so far - html, php, javascript
HTML5 has something for this, but it’s not widely supported yet. You’d need some more robust JavaScript for that. Perhaps do a search for something like “jquery form dropdown suggestions”. (That gave some useful results.)
Where are your suggestions currently stored?
If they are in a database, then you could use AJAX to send the user input to a server side script which retrieves the relevant records for the user input and then returns them to the browser. The AJAX request then uses the returned records to populate a <select> with the returned records to be used as suggestions. The user then selects an option from the <select> which is then automatically inserted in the input text box.
All this is done without a page refresh.
Probably should skip the html5 for right now. I’m learning a lot of new stuff as is.
All the input possibilities are in a php array that’s selected, for relevant options, with a for loop. Please confirm that that I need to get the input box and the <select> tag into a <div>. If so, I’m unclear about the code that will place a selected option in the input box. How would I do that? Also, please confirm that placing the input box and the selectable options can be part of an acceptable solution.
I understand. Can we work on the div for the the links under the input field and then then a snippet to update the links that go into the link container?
I’ve never updated a page without page refresh so what I know is this:
<html>
<head>
<style type"text/css">
#combo_box {
width:240px;
margin:0px
margin:0px 0px 0px 60px;
}
#link_container {
margin:0px 0px 0px 100px;
}
</style>
</head>
<body>
<div id="combo_box">
Hint Generator:<input type="text" id="field2" /> </br>
<div id="link_container">
<span onclick="document.getElementById('field2').value=this.innerHTML">Jim</span></br>
<span onclick="document.getElementById('field2').value=this.innerHTML">Jimmy</span></br>
<span onclick="document.getElementById('field2').value=this.innerHTML">JiJi</span></br>
</div>
</div>
</body>
</html>