I've already searched for the answer, and there are a few for this type of issue but not that I can get to work. What I am trying to setup is probably best explained if you use the code below and try it yourself, but I'll try to explain myself.
I have several input fields which are cloned after they have data inputted into them. Now I am trying to integrate an autocomplete script with it. So that all the one has to do is type the name of a person, select it from the popup and it puts the data into the cells.
The issue is that it won't input data for anything but the initial row, because the cloner changes the id by increasing the id number everything its cloned. Can anyone point me in the right direction of how to increment the autocompleter? Or how to rerun for each clone?
Thanks everyone, and here are the files needed to replicate the issue.
SQL
-- Table structure for table `employees`
--
CREATE TABLE IF NOT EXISTS `employees` (
`id` int(12) NOT NULL AUTO_INCREMENT,
`fname` varchar(50) NOT NULL,
`lname` varchar(50) NOT NULL,
`wage` int(12) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
--
-- Dumping data for table `employees`
--
INSERT INTO `employees` (`id`, `fname`, `lname`, `wage`) VALUES
(1, 'John', 'Doe', 25),
(2, 'Bob', 'Smith', 30);
test.php
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
//cloning script
$("#employee input").live("keyup", function(){
var id = this.id.match(/\d+/);
});
// The second requirement:
var uniqueIds = $("#employee tr").length;
$("#employee input[id^='employee_fname']").live("change", function(){
var $thisRow = $(this).closest("tr"),
$clone = $thisRow.clone(true), // Clone row
$inputs = $clone.find("input").val("");// Reset values, return all inputs
uniqueIds++; //Increment ID
$inputs[0].id = "employee_id" + uniqueIds;
$inputs[1].id = "employee_fname" + uniqueIds;
$inputs[1].id = "employee_lname" + uniqueIds;
$inputs[2].id = "employee_wage" + uniqueIds;
//$inputs.eq(0).focus(); // Focus on the first text field
$thisRow.after($clone); // Add row after current one
});
</script>
<script>
//autosuggest script
function lookup(employee_fname) {
if(employee_fname.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("test_ac.php", {queryString: ""+employee_fname+""},function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill1(thisValue) {
$('#employee_fname').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
function fill2(thisValue) {
$('#employee_id').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
function fill3(thisValue) {
$('#employee_lname').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
function fill4(thisValue) {
$('#employee_wage').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style>
.suggestionsBox {
position: relative;
left: 30px;
margin-top:100px;
margin-left:-35px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
width: 150px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
</head>
<body>
<table>
<tr>
<td width="200">
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</td>
<td>
<table>
<tr>
<td width="120" align="left" style="width:120px;">ID</td>
<td width="120" align="left" style="width:120px;">First Name</td>
<td width="120" align="left" style="width:120px;">Last Name</td>
<td width="120" align="left" style="width:120px;">Wage</td>
</tr>
</table>
<table id="employee">
<tr>
<td align="left"><input type="text" id="employee_id" name="employee_id" style="width:100px; background-color:#e5e5e5;" readonly="readonly" onblur="fill2();"/></td>
<td align="left"><input type="text" id="employee_fname" name="employee_fname" style="width:100px;" onblur="fill1();" onkeyup="lookup(this.value);"/></td>
<td align="left"><input type="text" id="employee_lname" name="employee_lname" style="width:100px; background-color:#e5e5e5;" readonly="readonly" onBlur="fill3"/></td>
<td align="left"><input type="text" id="employee_wage" name="employee_wage" style="width:100px; background-color:#e5e5e5;" readonly="readonly" onblur="fill4();" /></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
test_ac.php
<?php
// PHP5 Implementation - uses MySQLi.
// mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
$db = new mysqli('localhost', 'root' ,'passsword', 'database');
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Could not connect to the database.';
} else {
// Is there a posted query string?
if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);
// Is the string length greater than 0?
if(strlen($queryString) >0) {
// Run the query: We use LIKE '$queryString%'
// The percentage sign is a wild-card, in my example of countries it works like this...
// $queryString = 'Uni';
// Returned data = 'United States, United Kindom';
// YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
// eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10
$query = $db->query("SELECT fname, lname, id, wage FROM employees WHERE fname LIKE '$queryString%' LIMIT 10");
if($query) {
// While there are results loop through them - fetching an Object (i like PHP5 btw!).
while ($result = $query ->fetch_object()) {
// Format the results, im using <li> for the list, you can change it.
// The onClick function fills the textbox with the result.
// YOU MUST CHANGE: $result->value to $result->your_colum
echo '<li onClick="fill1(\''.$result->fname.'\');
fill2(\''.$result->id.'\');
fill3(\''.$result->lname.'\');
fill4(\''.$result->wage.'\');
">'.$result->lname. ',' .$result->fname.'</li>';
}
} else {
echo 'ERROR: There was a problem with the query.';
}
} else {
// Dont do anything.
} // There is a queryString.
} else {
echo 'There should be no direct access to this script!';
}
}
?>
Change the autosuggest script to the code below. This solved my issue.
var sourceElement;
//autosuggest script
function lookup2(source, employee_id) {
sourceElement = source;
if(employee_id.length == 0) {
// Hide the suggestion box.
$('#suggestions2').hide();
} else {
$.post("../../autocomplete/jobadd_employee.php", {queryString: ""+employee_id+""},function(data){
if(data.length >0) {
$('#suggestions2').show();
$('#autoSuggestionsList2').html(data);
}
});
}
} // lookup
function fill8(thisValue) {
$('#employee_id'+sourceElement.id.replace("employee_id","")).val(thisValue);
setTimeout("$('#suggestions2').hide();", 200);
}
function fill9(thisValue) {
$('#employee_fname'+sourceElement.id.replace("employee_id","")).val(thisValue);
setTimeout("$('#suggestions2').hide();", 200);
}
function fill10(thisValue) {
$('#employee_lname'+sourceElement.id.replace("employee_id","")).val(thisValue);
setTimeout("$('#suggestions2').hide();", 200);
}
function fill11(thisValue) {
$('#employee_wage'+sourceElement.id.replace("employee_id","")).val(thisValue);
setTimeout("$('#suggestions2').hide();", 200);
}