Typeahead and first cell selector

Question

I have this table

<table id="vehicleParamTable" class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
    </tbody>    
</table>

When a click on a link, I add a row. That work fine.

In the first column of the row, I add an jquery-typehead

Selector is not working, also would like to avoid it for first row (th header)

$('#vehicleParamTable tr td:first-child').typeahead({
  minLength: 2,
  display: "name",
  mustSelectItem: true,
  emptyTemplate: function(query) {
    //must reset current element here
    return 'No result for "' + query + '"';
  },
  source: {
    vehicleParam: {
      ajax: {
        url: "/rest/vehicleparam",
        path: "content"
      }
    }
  },
  callback: {
    onEnter: function(node, a, item, event) {
      //must assign item.id to current current element id 
    },
    onResult: function(node, query, result, resultCount, resultCountPerGroup) {
      if (resultCount < 1) {
        //must reset current element here
      }
    }
  }
});

Edit

$('#vehicleParamTable tr td:first-child')

seem good, but with the rest(typeahead init..) that return undefined

Edit 2 because I add dynamicly row, need to refresh typehead...

Answer 1

I am assuming you are using this https://github.com/running-coder/jquery-typeahead?

This plugin needs to be initialized on an input field. So, given that your input field is in the first column of the first row after the header, the selector would be

$('#vehicleParamTable tbody tr td:first-child input').typeahead({ ...options })