CodeIgniter Forums
input type text and autocomplete - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: input type text and autocomplete (/showthread.php?tid=60725)

input type text and autocomplete - El Forum - 06-14-2014

[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..?

input type text and autocomplete - El Forum - 06-14-2014

[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.

input type text and autocomplete - El Forum - 06-14-2014

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

input type text and autocomplete - El Forum - 06-14-2014

[eluser]CroNiX[/eluser]
The same way you are when the page loads.
Code:
$(selector).autocomplete({options});


input type text and autocomplete - El Forum - 06-14-2014

[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);
   }
   });
  }


input type text and autocomplete - El Forum - 06-14-2014

[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:
&lt;input type="text"  value="" name="txtObjectName[]" id="txtObjectName" class="txtObjectName" &gt;


input type text and autocomplete - El Forum - 06-15-2014

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

input type text and autocomplete - El Forum - 06-15-2014

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

input type text and autocomplete - El Forum - 06-15-2014

[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:
&lt;input id="cm1" /&gt;
&lt;input id="cm2" /&gt;
&lt;input id="cm3" /&gt;
&lt;input id="cm4" /&gt;
&lt;input id="cm5" /&gt;
&lt;input id="cm6" /&gt;
&lt;input id="cm7" /&gt;
.
.
.
wanna post my new code...?