javascript - Pass a parameter into Bloodhound from Typeahead? -

i setting form typeahead. have 2 input fields next each other, , need autocomplete on each of them. html looks this:

<select id="numerator">     <option value="presentation">presentation</option>     <option value="chemical">chemical</option> </select> <input id="numeratorid" class="typeahead" type="text" /> <br/> <select id="denominator">     <option value="presentation">presentation</option>     <option value="chemical">chemical</option> </select> <input id="denominatorid" class="typeahead" type="text" /> 

each of input fields autocomplete looking @ api endpoint. should of form /api/1.0/code?type=presentation&code=123 or /api/1.0/code?type=chemical&code=123.

the value of type parameter in api call should depend on value of <select> element next each input field.

the problem i'm having don't know how tell bloodhound type parameter should be.

ideally i'd pass in bloodhound, don't know how that. javascript:

var bnfmatches = new bloodhound({   datumtokenizer: bloodhound.tokenizers.obj.whitespace('value'),   querytokenizer: bloodhound.tokenizers.whitespace,   remote: {       url: '/api/1.0/code?',       replace: function(url, uriencodedquery) {         url = url + 'code=' + uriencodedquery;         // how change denominator denominator queries?         val = $('#numerator').val();          if (!val) return url;         return url + '&code_type=' + encodeuricomponent(val)       }   } });  $('.typeahead').typeahead({     hint: true,     highlight: true,     minlength: 2 }, {     name: 'states',     displaykey: 'id',     source: bnfmatches.ttadapter() }); 

i'd grateful suggestions.

try

html

note, removed duplicate id numeratorid @ input elements; substituted numeratorid , denominatorid , respectively. permits selecting select element within replace function.

<select id="numerator">     <option value="presentation">presentation</option>     <option value="chemical">chemical</option> </select> <input id="numeratorid" class="typeahead" type="text" /> <br/> <select id="denominator">     <option value="presentation">presentation</option>     <option value="chemical">chemical</option> </select> <input id="denominatorid" class="typeahead" type="text" /> 

js

note, bnfmatches not appear initialized. added bnfmatches.initialize(); after bloodhound settings.

var bnfmatches = new bloodhound({       datumtokenizer: bloodhound.tokenizers.obj.whitespace('value'),       querytokenizer: bloodhound.tokenizers.whitespace,       remote: {           url: '/api/1.0/code?',           replace: function(url, uriencodedquery) {             var val = $(".typeahead").filter(":focus")                      .attr("id").slice(0, -2);             var res = (url + "type=" + $("#" + val).val() + "&code="                        + encodeuricomponent(uriencodedquery));             console.log(res);             return res           }       }     });      bnfmatches.initialize();      $('.typeahead').typeahead({         hint: true,         highlight: true,         minlength: 2     },     {         name: 'states',         displaykey: 'id',         source: bnfmatches.ttadapter()     }); 

var bnfmatches = new bloodhound({    datumtokenizer: bloodhound.tokenizers.obj.whitespace('value'),    querytokenizer: bloodhound.tokenizers.whitespace,    remote: {        url: '/api/1.0/code?',        replace: function(url, uriencodedquery) {          var val = $(".typeahead").filter(":focus")                   .attr("id").slice(0, -2);          var res = (url                     + "type=" + $("#" + val).val() + "&code="                     + encodeuricomponent(uriencodedquery));          console.log(res);          return res        }    }  });    bnfmatches.initialize();    $('.typeahead').typeahead({      hint: true,      highlight: true,      minlength: 2  },  {      name: 'states',      displaykey: 'id',      source: bnfmatches.ttadapter()  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>  <script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>    <select id="numerator">      <option value="presentation">presentation</option>      <option value="chemical">chemical</option>  </select>  <input id="numeratorid" class="typeahead" type="text" />  <br/>  <select id="denominator">      <option value="presentation">presentation</option>      <option value="chemical">chemical</option>  </select>  <input id="denominatorid" class="typeahead" type="text" />