Question

我想知道是否有办法让我根据用户的输入提供动态建议，使用Twitter的typeahead.js库和bloodhound库。我无法弄清楚如何在不完全复制代码的情况下创建动态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首先使用bloodhound将查询发送到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在Bloodhound定义它之前没有定义：

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

typeahead.js动态建议

1 个答案: