CODEWITHSUNDEEP
jqueryautocompletejquery-ui-autocomplete
Claudio
Claudio

Reputation: 3824

Jquery autocomplete does not work with class

I am using the autocomplete from Jquery and I have been using it with no issues when the the handler is an id. However, now I need the same source variable to autocomplete a large quantity of inputs. My idea was to replace the id by class but it does not work (no errors). The jquery is something like this:

<script>
$( function() {var all_users = [
        {
        id: "2",
        label: "Claudio"
        },
        {
        id: "3",
        label: "Tom"
        },
        {
        id: "4",
        label: "Brandon"
        },
        {
        id: "5",
        label: "Edgar"
        },
      {
        id: "0",
        label: "0"
      }
    ];

$( ".invitee" ).autocomplete({
  minLength: 0,
  source: all_users,
  focus: function( event, ui ) {
    $( ".invitee" ).val( ui.item.label );
    return false;
  },

  select: function( event, ui ) {
    $( "#invitee_name" ).val( ui.item.label );
    $( "#user_id" ).val( ui.item.id );
    return false;
     }
    })
  } );
  </script>

And the html:

<label>Who was your best friend in Kindergarden</label> 
<input type="text" class="form-control" class="invitee" id="1">

<label>Who was your best friend in High School</label> 
<input type="text" class="form-control" class="invitee" id="2">

<label>Who was your best friend in jail</label> 
<input type="text" class="form-control" class="invitee" id="3">

<input type="text" class="form-control" id="invitee_name">
<input type="text" class="form-control" id="user_id">

If I change one of the inputs to id="invitee" and fix the handlers it works well, but only for one input. How can I approach this issue without the need of duplicating tirelessly '$( ".invitee" ).autocomplete'?

For testing purposes: avhub.teameivi.com/test_autocomplete.php

Upvotes: 0

Views: 1027

Answers (1)

peeebeee
peeebeee

Reputation: 2618

You are assigning class names to the <input> elements incorrectly. Should be

<input type="text" class="form-control invitee" id="1">

Upvotes: 1

Related Questions