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

时间:2014-08-01 15:15:58

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

我正在尝试设置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

1 个答案:

答案 0 :(得分:3)

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

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

这将首先使用RoutingBundle生成一个通用网址并使用“WILDCARD”#39;作为你的过滤器。告诉猎犬使用&#39; WILDCARD&#39;在作为占位符的网址上,它将完全用输入的查询替换它。