Twitter typehead auto-complete for remote source with dynamic values

Question

I am trying to use typeahead.js 0.9.3 https://github.com/twitter/typeahead with remote option, Basically I wanted to apply auto-complete on 5-6 fields and I wanted to add dynamic value based on the id of the current field in my remote url and valuekey.

This is what i am trying.

jQuery(function($) {
$( ".posts_autocomplete" ).each(function() {
  var fid = $(this).attr("id");
  var field = fid.replace("post_", "");
  $(this).typeahead({
    name: 'posts_search',
    remote: '/posts/search?q=%QUERY&field='+field,
    valueKey: field,
    minLength: 2,
    limit: 10
  });
});
});

I have also tried replace Bootstrap 3 typeahead.js - remote url attributes but it doesn't seem to work.

Answer 1

Resolved it using a unique name for typehead inside each iteration.

jQuery(function($) {
$( ".posts_autocomplete" ).each(function(i) {
  var fid = $(this).attr("id");
  var field = fid.replace("post_", "");
  $("#"+fid).typeahead({
    name: i,
    remote: '/posts/search?q=%QUERY&field='+field,
    valueKey: field,
    minLength: 2,
    limit: 10
  });
});
});