在 Symfony2 中使用 Typeahead + Bloodhound 和 FOSJsRoutingBundle 执行查询答案

【问题标题】：Performing a query using Typeahead + Bloodhound and FOSJsRoutingBundle in Symfony2在 Symfony2 中使用 Typeahead + Bloodhound 和 FOSJsRoutingBundle 执行查询
【发布时间】：2014-08-01 15:15:57
【问题描述】：

我正在尝试设置 Typeahead + Bloodhound 以在字段上执行搜索并提供建议。该字段的 HTML 代码如下：

<div class="col-sm-10" id="products_forms">
    <input type="text" placeholder="Producto" id="ProductoForm_0_product_id" name="ProductoForm[0][product_id]" class="form-control typeahead">
</div>

我使用 Symfony 的两个主要功能：一个用于返回所有产品并将其用作prefetch，另一个用于过滤后的产品。该函数的路由如下所示：

 // the one I use as prefetch parameter in bloodhound
 * @Route("/get_products", name="all_products")

 // the one I use as remote
 * @Route("/get_products/{filter}", name="filter_products")

如您所见，第一个没有获取任何参数，因为它将所有产品作为 JSON 值返回，但第二个将 {filter} 作为参数用于执行 LIKE 并仅返回过滤后的产品。

现在我完全不知道 Bloodhound 是如何工作的，所以我阅读了 docs 并提前阅读了 docs 并以 here 和 Remote 为例，并制作了以下代码：

// Trigger typeahead + bloodhound
var products = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: Routing.generate('all_products'),
    remote: Routing.generate('filter_products', { 'filter' : '%query' })
});

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

对吗？我的意思是，当页面加载时，我会预取所有产品，但如果我在 .typeahead 元素上键入任何产品，我只会得到过滤后的产品？我不知道%query 是否是我应该传递给filter_products 路由以获得过滤值的正确值。有什么帮助吗？

这是我第一次使用 Typeahead + Bloodhound

【问题讨论】：

标签： javascript jquery twitter-bootstrap typeahead.js bloodhound

【解决方案1】：

将remote: Routing.generate('filter_products', { 'filter' : '%query' }) 替换为例如

var url = Routing.generate('filter_products', {filter: 'WILDCARD'});
// ... some code
remote: {
            url: url,
            wildcard: 'WILDCARD'
        }

这将首先生成一个带有 RoutingBundle 的通用 URL，并将“WILDCARD”作为您的过滤器。比告诉 Bloodhound 使用 url 上的“WILDCARD”作为占位符，它会用输入的查询完美地替换它。

【讨论】：