0
私はすでに答えを探していますが、このタイプの問題はいくつかありますが、私は働くことができません。私がセットアップしようとしているのはおそらく、以下のコードを使って自分で試してみると最もよく説明されますが、自分自身を説明しようとします。クローンされたフィールドでオートコンプリート
私はいくつかの入力フィールドにデータが入力された後に複製されます。今私はオートコンプリートスクリプトをそのスクリプトに統合しようとしています。そのためには、人の名前を入力してポップアップから選択し、データをセルに入れます。
クローンがクローンしたすべてのID番号を増やしてIDを変更するため、最初の行以外のデータは入力されないという問題があります。誰かがオートコンプリートを増やす方法の正しい方向に私を指すことができますか？または各クローンを再実行する方法は？
ありがとうございました。問題を再現するために必要なファイルは次のとおりです。
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!';
}
}
?>