2015-11-16 101 views
0

我想用symfony 2.7的typeahead來使用LIKE進行數據庫搜索。我已閱讀typeahead的文檔,並基於他們網站上的示例,我放了一個小例子來看看它是如何工作的。由於我在表中執行搜索的表約有1300個條目,因此我生成了一個包含所有條目的json文件以提高性能。 問題是typeahead不顯示任何信息從遠程或預取,我不明白爲什麼它不起作用,因爲我沒有對示例中的原始代碼做太多更改。目前生成的結果包含來自示例頁面的虛擬數據,因爲我認爲從遠程返回的結果有問題。也許我錯過了一些東西,我看不到解決方案。 我檢查了控制檯,我沒有得到任何錯誤,在加載之前加載了血獵犬,兩個加載都很好,js文件加載後它們顯示內容。symfony2.7,bloodhound,typeahead不顯示自動完成

JavaScript文件:

var url = Routing.generate('ajax_search', {name: 'query'}); 
// Trigger typeahead + bloodhound 
var products = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: '/json/result.json', 
    remote: { 
     url: url, 
     wildcard: 'query' 
    } 
}); 

products.initialize(); 

$('#products_forms .typeahead').typeahead({ 
    name: 'product', 
    displayKey: 'value', 
    source: products.ttAdapter() 
}); 

的HTML測試文件

{% extends '::base.html.twig' %} 
{% block body %} 
<div class="col-sm-10" id="product"> 
    <input type="text" placeholder="Product" id="product" name="product" class="form-control typeahead"> 
</div> 
{% endblock %} 

從PHP中生成的虛擬文件

cat result.json 

      {"stateCode": "CA", "stateName": "California"}, 
      {"stateCode": "AZ", "stateName": "Arizona"}, 
      {"stateCode": "NY", "stateName": "New York"}, 
      {"stateCode": "NV", "stateName": "Nevada"}, 
      {"stateCode": "OH", "stateName": "Ohio"} 

回答

0

似乎它的工作原理是這樣的:

的javascript:

$(document).ready(function() { 
    var url = Routing.generate('ajax_search', {name: 'WILDCARD'}); 
    // Trigger typeahead + bloodhound 
    var products = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     identify: function(obj) { return obj.team; }, 
     prefetch: 'json/result.json', 
     remote: { 
      url: url, 
      wildcard: 'WILDCARD', 
     } 
    }); 

    products.initialize(); 

    $('#products_forms .typeahead').typeahead({ 
     minLength: 3, 
     highlight: true 
    }, 
    { 
     name: 'product', 
     display: 'team', 
     source: products.ttAdapter() 
    }); 
});