typeahead.js动态建议

Question

I'm wondering if there's a way for me to provide dynamic suggestions based on a user's input using Twitter's typeahead.js library in conjunction with the bloodhound library. I cannot figure out how to create a dynamic suggestion without completely duplicating the code.

Here's my code:

/* Bloodhound for main search window */
partsList = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'pSearch.php?p=%QUERY',                
        wildcard: '%QUERY',
        minLength: 2,
        filter: function (partsList) {        
            return $.map(partsList, function (itemNumber) {            
                  return {
                      itemOneHeader   : itemNumber.header_one,
                      itemTwoHeader   : itemNumber.header_two,
                      itemThreeHeader : itemNumber.header_three,
                      itemOne         : itemNumber.one,
                      itemTwo         : itemNumber.two,
                      itemThree       : itemNumber.three

                  };

            });
        }
    },
    limit: 15
});

/* Main search box typeahead */
$('.mainSearchBox').typeahead(
{   hint: false,
    name: 'mainSearchBox',
    highlight: true,
    minLength: 2
},
{
    displayKey: 'itemOne',    
    templates: {       
        suggestion: Handlebars.compile("<div><strong>{{itemOne}}</strong> <div class='mfr_suggestion'>{{itemTwo}} > {{itemThree}}</div></div>")
    },    
    source: partsList.ttAdapter(),
    limit: 15}).on('typeahead:selected', function (obj, datum) {    
      console.log(datum);
      iOne           = datum.itemOne;
      iTwo           = datum.itemTwo;
      iThree         = datum.itemThree;
      iOne_header    = datum.itemOneHeader;                  
      iTwo_header    = datum.itemTwoHeader;
      iThree_header  = datum.itemThreeHeader;

      var d = document.getElementById("search");      
      d.className = "fa fa-2x fa-check-square uCheck fa-happy";                        

        headerOne   = iOne_header;
        headerTwo   = iTwo_header;
        headerThree = iThree_header;          

      $('#headerOne').val(headerOne);
      $('#headerTwo').val(headerTwo);
      $('#headerThree').val(headerThree);


})
.on('typeahead:asyncrequest', function() {
    $('#loadingCogs').html('<i class="fa fa-circle-o-notch fa-3x fa-spin"></i>');
})
.on('typeahead:asynccancel typeahead:asyncreceive', function() {
    $('#loadingCogs').html('');
});

Typeahead begins by using bloodhound to send a query off to pSearch.php , and it returns 6 items from that page to typeahead, which displays some of those to the user via the dropdown box, with this code:

templates: {       
        suggestion: Handlebars.compile("<div><strong>{{itemOne}}</strong> <div class='suggestion'>{{itemTwo}} > {{itemThree}}</div></div>")
    },  

What I'm aiming to do is something like this:

templates: {
  if ( itemOne == "a" ) {       
    suggestion: Handlebars.compile("<div><strong>{{itemOne}}</strong> <div class='suggestion'>{{itemTwo}} > {{itemThree}}</div></div>")
  } else {
    suggestion: Handlebars.compile("something else...")
  }
},  

which I obviously cannot do because I can't add an if statement here. Is there a way to accomplish what I'm trying to do without duplicating the entire function? I can echo a PHP session variable that will allow me to select the correct code prior to user starting to type in the input box, but I feel like this makes my page unnecessarily long if there's a shorter way to do this...

The only way I've thought might work is by using a ternary operator, but this does not work because itemOne is not defined until bloodhound defines it:

suggestion: Handlebars.compile( itemOne == "a" ? "<div><strong>{{itemOne}}</strong> <div class='suggestion'>{{itemTwo}} > {{itemThree}}</div></div>" : "something else..." )

Answer 1

So - using the already-established PHP session variable I mentioned in my question - I was able to do this using a ternary operation, without having to duplicate the entire function:

/* before I initialize anything related to typeahead... */
php_session_variable = = <?php echo json_encode($_SESSION['abc']);?>;

    suggestion: Handlebars.compile( php_session_variable == "a" ? "<div><strong>{{itemOne}}</strong></div>" : "<div><strong>{{itemOne}}</strong> <div class='suggestion'>{{itemTwo}} > {{itemThree}}</div></div>" )