Question

I would really appreciate if someone can help me with this code.
I have input fields that are created dynamicly by clicking on link.
The autosuggest works fine only on the first one – the static input field, but I can’t make it work on the dynamic ones.

Here is the HTML code :

<tr>
  <td><label for="addassureed">Additional Assured</label></td>
 <td>
  <div class="wrapSearch">
  <div>
 <input type="text" name="addassured[]" class="input1" id="addassured" size="45" maxlength="1000" onkeyup="autoSuggest(this.id, 'listWrap2', 'searchList2', 'addassured', event);" onKeyDown="keyBoardNav(event, this.id);" />
 <a href="#" onClick="addInput('dynamicInput');" /><img src="../../img/add.png" height="16" width="16" /></a>
      </div>
      <div class="listWrap" id="listWrap2">
      <ul class="searchList" id="searchList2">
       </ul>
       </div>
       </div>
</td>

The code for creating the Input fields:

var counterAssured = 1;
var limit = 10;
function addInput(divName){ 
 if (counterAssured == limit)  {
      alert("You have reached the limit of adding " + counterAssured + " inputs");
 } else {
      var newdiv = document.createElement('div');
      newdiv.innerHTML = " <td><label>Additional Assured " + (counterAssured + 1) + "</label></td><td><input type='text' name='addassured["+counterAssured+"]' class='input1'></td>";
      document.getElementById(divName).appendChild(newdiv);
      counterAssured++;
}
}

And the php code for querying the db : autosuggest.php

$dbhost = 'localhost';  // Database Host
$dbuser = '';       // Database Username
$dbpass = '';           // Database Password
$dbname = '';      // Database Name

$limit = 20;
if (!isset($_POST['itemCode']))
exit;
$input = trim($_POST['itemCode']);


$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname);

$sql = "SELECT company_name FROM contacts WHERE company_name LIKE  '".$input."%' LIMIT $limit";

$result = mysql_query($sql);
if (!$result || !mysql_num_rows($result))
 exit;
 include_once "headers.php";
 echo "<response>";
 while ($row = mysql_fetch_array($result))
 {
$keywords = $row['company_name'];
 echo "<keywords>". $keywords ."</keywords>";       
 }
echo "</response>";

Answer 1

You missed these two events [ onkeyup& onKeyDown] in the dynamically created fields

Try this,

newdiv.innerHTML = ' <td><label>Additional Assured ' + (counterAssured + 1) + '</label></td><td><input type="text" name="addassured['+counterAssured+']" class="input1" onkeyup="autoSuggest(this.id, \'listWrap2\', \'searchList2\', \'addassured\', event);" onKeyDown="keyBoardNav(event, this.id);"></td>';

or with alternate quote syntax:

newdiv.innerHTML = " <td><label>Additional Assured " + (counterAssured + 1) + "</label></td><td><input type=\"text\" name=\"addassured["+counterAssured+"]\" class=\"input1\" onkeyup=\"autoSuggest(this.id, 'listWrap2', 'searchList2', 'addassured', event);\" onKeyDown=\"keyBoardNav(event, this.id);\"></td>";