jQuery multiple autocomplete with different input IDs

Question

I use jQuery autocomplete and have multiple input fields with different IDs, and they are populated from a MySQL database.

  $("#CCU1").autocomplete({
  minLength : 1,
  source: function( request, response ) {
    $.ajax({
      url:"<?php echo site_url().'gsimc/autocomplete'; ?>",
      dataType: 'json',
      data: { 
        term  : $("#CCU1").val(),
        column: 'course',
        tbl   : 'tbl_courses'
      },
      success: function(data){
        if(data.response == 'true') {
          response(data.message);
        }
      }
    });
  }
});

The input fields has IDs of CCU1...CCU5, name='course'. Any idea how to autocomplete the five input fields instead of hardcoding each one?

Course1: <input type='text' name='course[]' id='CCU1'/><br />
Course2: <input type='text' name='course[]' id='CCU2'/><br />
Course3: <input type='text' name='course[]' id='CCU3'/><br />
Course4: <input type='text' name='course[]' id='CCU4'/><br />
Course5: <input type='text' name='course[]' id='CCU5'/><br />

A pattern you can use: add a dummyclass to each element like .autocompleteHandler and refer to the class as the selector $('.autocompleteHandler').autocomplete(), and use the reference to $(this) inside the function. — JOBG
– JOBG, Commented Dec 23, 2012 at 18:11

Jason Whitted · Accepted Answer · 2012-12-23 18:00:19Z

4

Assuming that your above code is working for one of them, you could do:

$("[id^=CCU]").each(function(){
    $(this).autocomplete({
      minLength : 1,
      source: function( request, response ) {
        $.ajax({
          url:"<?php echo site_url().'gsimc/autocomplete'; ?>",
          dataType: 'json',
          data: { 
            term  : $(this).val(),
            column: 'course',
            tbl   : 'tbl_courses'
          },
          success: function(data){
            if(data.response == 'true') {
              response(data.message);
            }
          }
        });
      }
    });
});

answered Dec 23, 2012 at 18:00

Jason Whitted

4,0141 gold badge18 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2012-12-23 18:01:22Z

1

Use `$(this)` instead of hardcoding the ID:

term: $("#CCU1").val(),

Replace it with:

term: $(this).val(),

Full code:

$("[id^=CCU]").each(function(){
    $(this).autocomplete({
      minLength : 1,
      source: function( request, response ) {
        $.ajax({
          url:"<?php echo site_url().'gsimc/autocomplete'; ?>",
          dataType: 'json',
          data: { 
            term  : $(this).val(),
            column: 'course',
            tbl   : 'tbl_courses'
          },
          success: function(data){
            if(data.response == 'true') {
              response(data.message);
            }
          }
        });
      }
    });
});

answered Dec 23, 2012 at 18:01

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

7 Comments

rico Over a year ago

I get an error of: Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

Praveen Kumar Purushothaman Over a year ago

That toLowerCase function is not used in the above script. Can you show us the full code?

rico Over a year ago

The error is in jquery.min.js, I have no problem showing the autocomplete for just one input field though.

rico Over a year ago

I really can't figure this one out. I tried everything all of you have suggested and still getting the uncaught type error thingy. Maybe I need to sleep this out first. :(

Marc Schluper Over a year ago

This worked for me to get the id of the element being used: $(this)[0].element.attr('id')

|

Collectives™ on Stack Overflow

jQuery multiple autocomplete with different input IDs

2 Answers 2

Comments

Use `$(this)` instead of hardcoding the ID:

Full code:

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Use $(this) instead of hardcoding the ID:

Full code:

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Use `$(this)` instead of hardcoding the ID: