Jquery autocomplete with identical IDs

jonesy001 · December 27, 2012, 4:42am

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 · December 27, 2012, 4:16pm

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 · December 30, 2012, 11:22pm

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.

rpkamp · December 30, 2012, 11:53pm

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

jonesy001 · December 30, 2012, 11:57pm

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 · December 31, 2012, 12:41am

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

rpkamp · December 31, 2012, 12:41am

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 · December 31, 2012, 12:53am

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.

jonesy001 · December 31, 2012, 12:54am

cpradio, do you mean like the example ScallioXTX posted?

rpkamp · December 31, 2012, 12:59am

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

Yup, different code to do the same thing.

jonesy001 · December 31, 2012, 1:03am

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.

rpkamp · December 31, 2012, 1:31am

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 · December 31, 2012, 2:10am

Hi ScallioXTX,

That worked perfectly!

Thank you very much.

cpradio · December 31, 2012, 11:07am

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

Stomme_poes · December 31, 2012, 1:40pm

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>