I have a form which is essentially an autocomplete input box. I can get this
to work perfectly for a single text box. What I need
to do is create unique input boxes by using a php for loop. This will use
the counter $i
to give each input box a unique name and id.
The problem is that
the unique value of
the input box needs
to be passed
to the javascript. this will then pass
the inputted data
to the external php page and return
the mysql results.
As mentioned I have this working for a single input box but need assistance with passing
the correct values
to the javascript and returning it
to correct input box.
existing code for working solution (first row works only, all other rows update first row input box)
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide
the suggestion box.
$('#suggestions').hide();
} else {
$.post("autocompleteperson.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
</head>
<body>
<form name="form1" id="form1" action="addepartment.php" method="post">
<table>
<? for ( $i = 1; $i <=10; $i++ ) { ?>
<tr>
<td> <? echo $i; ?></td>
<td>
<div>
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</td>
</tr>
<? } ?>
</table>
</body>
</html>
code for autocompleteperson.php is:
$query = $db->query("SELECT fullname FROM Persons WHERE fullname LIKE '$queryString%' LIMIT 10");
if($query) {
while ($result = $query ->fetch_object()) {
echo '<li onClick="fill(\''.$result->fullname.'\');">'.$result->fullname.'</li>';
}
}
in order
to get it
to work for all rows, I include
the counter $i in each of
the file names as below:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function lookup(inputString<? echo $i; ?>) {
if(inputString<? echo $i; ?>.length == 0) {
// Hide
the suggestion box.
$('#suggestions<? echo $i; ?>').hide();
} else {
$.post("autocompleteperson.php", {queryString: ""+inputString<? echo $i; ?>+""}, function(data){
if(data.length >0) {
$('#suggestions<? echo $i; ?>').show();
$('#autoSuggestionsList<? echo $i; ?>').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString<? echo $i; ?>').val(thisValue);
setTimeout("$('#suggestions<? echo $i; ?>').hide();", 200);
}
</script>
</head>
<body>
<form name="form1" id="form1" action="addepartment.php" method="post">
<table>
<? for ( $i = 1; $i <=10; $i++ ) { ?>
<tr>
<td> <? echo $i; ?></td>
<td>
<div>
<input type="text" size="30" value="" id="inputString<? echo $i; ?>" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions<? echo $i; ?>" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList<? echo $i; ?>">
</div>
</div>
</td>
</tr>
<? } ?>
</table>
</body>
</html>
The autocomplete suggestion works (although always shown on first row) but when selecting
the data always returns
to row 1, even if input was on row 5. I have a feeling this has
to do with
the fill() but not sure? is it due
the the autocomplete page code? or does
the fill referencing ThisValue have something
to do with it.
example of this page (as above) can be found here
Thanks for
the assistance, much appreciated.
UPDATE - LOLO
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function lookup(i, inputString) {
if(inputValue.length == 0) {
// Hide
the suggestion box.
$('#suggestions' + i).hide();
} else {
$.post("autocompleteperson.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions' + i).show();
$('#autoSuggestionsList' + i).html(data);
}
});
}
} // lookup
function fill(i, thisValue) {
$('#inputString' + i).val(thisValue);
setTimeout("$('#suggestions' + i).hide();", 200);
}
</script>
</head>
<body>
<form name="form1" id="form1" action="addepartment.php" method="post">
<table>
<? for ( $i = 1; $i <=10; $i++ ) { ?>
<tr>
<td> <? echo $i; ?></td>
<td>
<div>
<input type="text" size="30" value="" id="inputString<?php echo $i; ?>" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions<? echo $i; ?>" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList<? echo $i; ?>">
</div>
</div>
</td>
</tr>
<? } ?>
</table>
</body>
</html>
google chrome catched
the following errors:
first line on input, second line on loosing focus
