typeahead.js动态建议

Question

我想知道是否有一种方法可以让我结合使用Twitter的typeahead.js库和探犬库，根据用户的输入提供动态建议。我不知道如何在不完全复制代码的情况下创建动态suggestion。

下面是我的代码：

/* 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首先使用探犬向pSearch.php发送一个查询，然后将该页面中的6个条目返回给typeahead，后者通过下拉框向用户显示其中的一些条目，代码如下：

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

我的目标是这样做：

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

我显然不能这样做，因为我不能在这里添加if语句。有没有办法在不复制整个函数的情况下完成我想要做的事情？我可以回显一个PHP会话变量，它允许我在用户开始在输入框中输入之前选择正确的代码，但我觉得如果有更短的方法可以做到这一点，这会使我的页面不必要地长……

我认为唯一可行的方法就是使用一个三元运算符，但这行不通，因为直到侦探犬定义了itemOne，它才会被定义：

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

Answer 1

所以-使用我在问题中提到的已经建立的PHP会话变量-我能够使用一个三元操作来实现这一点，而不必复制整个函数：

/* 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>" )