Jquery autocomplete with identical IDs

[jonesy001]

Hi there,

I've hit a brick wall in the sense that I can't seem to think up the logic required to perform this task.

Basically I have a number of rows that are populated by a MySQL database. There are a few columns which a user must fill in to update certain information which are input fields. Without using Jquery/Ajax, everything is working fine. The only issue is that, to make data entry easier, autocomplete these fields based on a first name entered. This first name entered retrieves information from a MySQL database via PHP and Jquery autocomplete.

I have this working well when only one row is modified but as you can imagine there are many rows on a page and each one needs to be validated separately.

Here is the Jquery which works on a single row.

<script type="text/javascript">
$(document).ready(function(){
	 $('input#inst_fname').autocomplete({

 
    source: "contractor_prefill.php",
    minLength: 1,
	
	select: function(event, ui) {
			$('#inst_suburb').val(ui.item.suburb);
			$('#inst_state').val(ui.item.state);	
			$('#inst_lname').val(ui.item.second_name);		
			$('#inst_unit_type').val(ui.item.unit_type);		
			$('#inst_num').val(ui.item.unit_no);		
			$('#inst_street_num').val(ui.item.street_no);		
			$('#inst_street_name').val(ui.item.street_name);		
			$('#inst_street_type').val(ui.item.street_type);		
			$('#inst_postcode').val(ui.item.postcode);		
			$('#inst_phone_num').val(ui.item.phone_no);		
					
		}
    });

})
;
</script>

Here is an example of the HTML:

 <input type=\"text\" name=\"inst_fname[]\" id=\"inst_fname\"  ></td> <td>
 	 <input type=\"text\" name=\"inst_lname[]\" id=\"inst_lname"\"></td> <td>

I understand that you need unique IDs for this to work but this is where I fall short. I tried to use classes but that just duplicated the data on all rows. I have even started thinking about using for loops but it's starting to get messy.

If anyone can point me in the right direction I would be truly grateful.

Thanks.

[cpradio]

Remove the id attribute, and instead use a class.

 <input type=\"text\" name=\"inst_fname[]\" class=\"autocomplete\"  ></td> <td>
 	 <input type=\"text\" name=\"inst_lname[]\" class=\"autocomplete"\"></td> <td>

<script type="text/javascript">
$(document).ready(function(){
	 $('input.autocomplete').autocomplete({

 
    source: "contractor_prefill.php",
    minLength: 1,
	
	select: function(event, ui) {
			$('#inst_suburb').val(ui.item.suburb);
			$('#inst_state').val(ui.item.state);	
			$('#inst_lname').val(ui.item.second_name);		
			$('#inst_unit_type').val(ui.item.unit_type);		
			$('#inst_num').val(ui.item.unit_no);		
			$('#inst_street_num').val(ui.item.street_no);		
			$('#inst_street_name').val(ui.item.street_name);		
			$('#inst_street_type').val(ui.item.street_type);		
			$('#inst_postcode').val(ui.item.postcode);		
			$('#inst_phone_num').val(ui.item.phone_no);		
					
		}
    });

})
;
</script>

[jonesy001]

Hi cpradio,

I have done this but the other fields won't populate now.

As mentioned in my previous post, I did try using a class but it duplicated on each row the same information.

From your suggestion I'm trying to understand how $('#inst_suburb').val(ui.item.suburb); is identified if it's replaced with a class. The only reference is the name attribute.

Thanks.

[ScallioXTX]

What is the HTML surrounding the input fields? Are they in a table?

[jonesy001]

Hi ScallioXTX,

Yes they are. I'll post more of the code here:

<script type="text/javascript">
$(document).ready(function(){
	 $('input.autocomplete').autocomplete({

 
    source: "contractor_prefill.php",
    minLength: 1,
	
	select: function(event, ui) {
			$('#inst_suburb').val(ui.item.suburb);
			$('#inst_state').val(ui.item.state);	
			$('#inst_lname').val(ui.item.second_name);		
			$('#inst_unit_type').val(ui.item.unit_type);		
			$('#inst_num').val(ui.item.unit_no);		
			$('#inst_street_num').val(ui.item.street_no);		
			$('#inst_street_name').val(ui.item.street_name);		
			$('#inst_street_type').val(ui.item.street_type);		
			$('#inst_postcode').val(ui.item.postcode);		
			$('#inst_phone_num').val(ui.item.phone_no);		
					
		}
    });

})
;
</script>

<table width="100%" class="results">
<tr>
<form action='file.php' method='post' width='100%'>
<td>
 <input type=\"text\" name=\"inst_fname[]\" class=\"autocomplete\"  ></td> <td>
 	 <input type=\"text\" name=\"inst_lname[]\" class=\"autocomplete\"></td> 
<td>	<input type=\"submit\" > </td>
	</tr>
	</form>

[cpradio]

Couldn't you use $(this).parent().find('.classname').val()

[jonesy001]

cpradio, do you mean like the example ScallioXTX posted?

[cpradio]

cpradio, do you mean like the example ScallioXTX posted?

Yup, but I was trying to do it from a mobile phone (way too complicated). @ScallioXTX ; thanks for the assist

[Stomme poes]

It should be mentioned, that the HTML posted is invalid. To make it valid, the table could be a child entirely of the form.
<form>
<table>
...
</table>
</form>

[ScallioXTX]

Try this:

<script type="text/javascript">
$(document).ready(function() {
  $('input.autocomplete').autocomplete({
    source: "contractor_prefill.php",
    minLength: 1,
    select: function(event, ui) {
      var p = $(this).parent(), i=ui.item;
      $('.inst_suburb', p).val(i.suburb);
      $('.inst_state', p).val(i.state);
      $('.inst_lname', p).val(i.second_name);
      $('.inst_unit_type', p).val(i.unit_type);
      $('.inst_num', p).val(i.unit_no);
      $('.inst_street_num', p).val(i.street_no);
      $('.inst_street_name', p).val(i.street_name);
      $('.inst_street_type', p).val(i.street_type);
      $('.inst_postcode', p).val(i.postcode);
      $('.inst_phone_num', p).val(i.phone_no);
    }
  });
});
</script>

And put the class 'autocomplete' only on 'inst_fname' fields.

Also, as a tip, use only one name for one thing in all programming languages concerned. For example you are referring to 'phone_num' in HTML/JS while at the same time referring to 'phone_no' in your PHP. This practice will just confuse you. and makes your code overly complicated (e.g., there's no chance to optimise this code with 'foreach' like constructs because of the irregularities). Pick one of them and stick with it throughout all languages.

[jonesy001]

I tried that ScallioXTX and removed the autocomplete class from all fields except from inst_fname however it is not populating the rest of the fields.

Also, completely agree with the naming scheme you mentioned. I have just changed all references.

[ScallioXTX]

I tried that ScallioXTX and removed the autocomplete class from all fields except from inst_fname however it is not populating the rest of the fields.

Also, completely agree with the naming scheme you mentioned. I have just changed all references.

Forgot to mention, you should also replace the ID of all other fields to classes. So id="inst_state" becomes class="inst_state", etc.

cpradio, do you mean like the example ScallioXTX posted?

Yup, different code to do the same thing.

[jonesy001]

Forgot to mention, you should also replace the ID of all other fields to classes. So id="inst_state" becomes class="inst_state", etc.

Ok, just tried that and still no results.

I'll post updated code here to make sure I'm on the right page.

<script type="text/javascript">
$(document).ready(function() {
	$('.autocomplete').autocomplete({
		source: "contractor_prefill.php",
		minLength: 1,
		select: function(event, ui) {
			var p = $(this).parent(), i=ui.item;
			$('.inst_suburb', p).val(i.suburb);
			$('.inst_state', p).val(i.state);
			$('.inst_lname', p).val(i.second_name);
			$('.inst_unit_type', p).val(i.unit_type);
			$('.inst_unit_no', p).val(i.unit_no);
			$('.inst_street_no', p).val(i.street_no);
			$('.inst_street_name', p).val(i.street_name);
			$('.inst_street_type', p).val(i.street_type);
			$('.inst_postcode', p).val(i.postcode);
			$('.inst_phone_no', p).val(i.phone_no);
		}
    });
});
</script>




 <input type=\"text\" name=\"inst_fname[]\" class=\"autocomplete\"  ></td> <td>
 	 <input type=\"text\" name=\"inst_lname[]\" class=\"inst_lname\"></td> <td>
 	 <input type=\"text\" name=\"inst_unit_type[]\" class=\"inst_unit_type\"></td> <td>
 	 <input type=\"text\" name=\"inst_unit_no[]\" class=\"inst_unit_no\"></td> <td>
 	 <input type=\"text\" name=\"inst_street_no[]\" class=\"inst_street_no\"></td> <td>
 	 <input type=\"text\" name=\"inst_street_name[]\" class=\"inst_street_name\"></td> <td>
 	 <input type=\"text\" name=\"inst_street_type[]\" class=\"inst_street_type\"></td> <td>
 	 <input type=\"text\" name=\"inst_suburb[]\" class=\"inst_suburb\"></td> <td>
  	 <input type=\"text\" name=\"inst_state[]\" class=\"inst_state\" ></td> <td>
  	 <input type=\"text\" name=\"inst_postcode[]\" class=\"inst_postcode\"></td> <td>
   	 <input type=\"text\" name=\"inst_phone_no[]\" class=\"inst_phone_no\"></td> "

I should make mention that these input fields are created in a php while loop.

[ScallioXTX]

Right, so all the inputs are in different <td>'s. I missed that. Try this

<script type="text/javascript">
$(document).ready(function() {
  $('.autocomplete').autocomplete({
    source: "contractor_prefill.php",
    minLength: 1,
    select: function(event, ui) {
      var p = $(this).parent().parent(), i=ui.item;
      p.find('.inst_suburb').val(i.suburb);
      p.find('.inst_state').val(i.state);
      p.find('.inst_lname').val(i.second_name);
      p.find('.inst_unit_type').val(i.unit_type);
      p.find('.inst_unit_no').val(i.unit_no);
      p.find('.inst_street_no').val(i.street_no);
      p.find('.inst_street_name').val(i.street_name);
      p.find('.inst_street_type').val(i.street_type);
      p.find('.inst_postcode').val(i.postcode);
      p.find('.inst_phone_no').val(i.phone_no);
    }
    });
});
</script>

[jonesy001]

Hi ScallioXTX,

That worked perfectly!

Thank you very much.