input type text and autocomplete

[eluser]mohssenvox[/eluser]
hi , i am trying to autocomplete textbox , here is my code:
view:

Code:

[removed]
    var rowNum = 0;
    function addRow(frm) {
     rowNum++;
     var row = '<tr id="rowNum' + rowNum + '"><td> </td><td>&lt;input type="button" value="Remove"  + rowNum + ');"&gt;&lt;/td><td >&lt;input type="text"  value="" name="txtObjectName[]" id="txtObjectName" class="txtObjectName" &gt;&lt;/td><td>&lt;input type="text" name="txtUnitPrice[]" read value=""&gt;&lt;/td><td>&lt;input type="text" name="txtCountObject[]" value=""&gt;&lt;/td></tr>';
     jQuery('#test').append(row);
    }

    function removeRow(rnum) {
     jQuery('#rowNum' + rnum).remove();
    }
   [removed]
[removed]var site = "&lt;?php echo site_url(); ?&gt;
   ";
   $(function(){
   $('.txtObjectName').autocomplete({
   serviceUrl: site+'/test/search',  
   onSelect: function (suggestion) {
   $("#txtUnitPrice").val(suggestion.data);
   }
   });
   });
[removed]

?php
        $data = array("name" => "txtObjectName[]", "id" => "txtObjectName","class"=>"txtObjectName");
        echo form_input($data);        
        ?&gt;

controller:

Code:

public function search() {
  $keyword = $this -> uri -> segment(3);
  $data = $this -> db -> from('service') -> like('name', $keyword) -> get();
  foreach ($data->result() as $row) {
   $arr['query'] = $keyword;
   $arr['suggestions'][] = array('value' => $row -> name, 'data' => $row -> price);
  }
  echo json_encode($arr);
}

in normal way , auto complete work fine with php code(first input that created with form helper). but when i add new input with my jquery code , auto complete only work with first input , and dont work with new input , that jquery added on my form...
any idea..?

[eluser]CroNiX[/eluser]
When you

Code:

$('.txtObjectName').autocomplete({

when the page loads, it only assigns the autocomplete function to elements that are CURRENTLY on the page with the class of txtObjectName. If you dynamically add a new element with that class, autocomplete doesn't know anything about them unless you tell it. So you'd need to do that in your addRow() function.

Also, element IDs are supposed to be unique. No 2 elements on the page should have the same ID.

[eluser]mohssenvox[/eluser]
tnx for reply....
but how can i tell it in addRow function?

[eluser]CroNiX[/eluser]
The same way you are when the page loads.

Code:

$(selector).autocomplete({options});

[eluser]mohssenvox[/eluser]
hmmm.., it mean i use like this...?

Code:

function addRow(frm) {
   rowNum++;
   var row = '<tr id="rowNum' + rowNum + '"><td> </td><td>&lt;input type="button" value="Remove"  + rowNum + ');"&gt;&lt;/td><td >&lt;input type="text"  value="" name="txtObjectName[]" id="txtObjectName" class="txtObjectName" &gt;&lt;/td><td>&lt;input type="text" name="txtUnitPrice[]" read value=""&gt;&lt;/td><td>&lt;input type="text" name="txtCountObject[]" value=""&gt;&lt;/td></tr>';
   jQuery('#test').append(row);
$('.txtObjectName').autocomplete({
   serviceUrl: site+'/liqui/search',
   onSelect: function (suggestion) {
   $("#txtUnitPrice").val(suggestion.data);
   }
   });
  }

[eluser]CroNiX[/eluser]
Essentially, but I would use it on the elements ID, which I mentioned needs to be unique, instead of the class. Otherwise it will reassign the autocomplete to the other elements that already have it assigned using that classname.

You are creating this element with the same ID each time addRow() is called, so you need to fix that so it's unique, and then assign the autocomplete to that unique ID.

Code:

<input type="text"  value="" name="txtObjectName[]" id="txtObjectName" class="txtObjectName" >

[eluser]mohssenvox[/eluser]
i do it , i make my new input , with unique ID , still same problem....

[eluser]CroNiX[/eluser]
post your new code

[eluser]mohssenvox[/eluser]
hmm , 1 one more thing , u dont know how many textbox , user created with script , if i make unique id for each input , it make something bad for my code
like:

Code:

<input id="cm1" />
<input id="cm2" />
<input id="cm3" />
<input id="cm4" />
<input id="cm5" />
<input id="cm6" />
<input id="cm7" />
.
.
.

wanna post my new code...?