VisualSearch.js Sub Facets

Question

我正在尝试实现一个VisualSearch.js查询框，可用于搜索特定对象的属性。 VisualSearch.js提供的Facet可以有类别，但任何人都知道我可以为模型名称加载方面的方法.eg'user'）然后一次点击/选择加载第二个子方面，其中包含属性列表让用户有机会最终点击将通过JSON调用加载的值。我搜索过，找不到任何对这类功能的引用，但我可能只是使用了不正确的术语“Sub Facet”。

这是我一直在玩的JSFiddle。 http://jsfiddle.net/Savvy84/HRuAP/13/

var visualSearch = VS.init({
    container: $('#visual_search'),
    query: '',
    callbacks: {
        search: function(query, searchCollection) {},
        facetMatches: function(callback) {
            callback([
                {
                value: 'user.email',
                label: 'users.email',
                category: 'Users'},
                 {
                value: 'job.name',
                label: 'job.name',
                category: 'Jobs'},
                 {
                value: 'job.startDate',
                label: 'job.startDate',
                category: 'Jobs'}
            ]);
        },
        valueMatches: function(facet, searchTerm, callback) {
            if (searchTerm.length > 0) {
                //pass the facet to the search and let the server deal with it.
                switch (facet) {
                case 'user.email':
                    callback([
                        {
                        label: 'john.smith@example.com'},
                           {
                        label: 'jane.doe@example.com'}
                        ]);
                        break;
                }
            }
        }
    } });

非常感谢。

Answer 1

阅读完源代码后，我可以看到，为了创建这个功能，我必须分叉VisualSearch.js并编辑它的一些类。

http://documentcloud.github.com/visualsearch/docs/search_facet.html

Answer 2

现在我可能很晚才回答这个问题，但这可能对某些人有所帮助。 我同意@andrewsavil你需要修改视觉搜索库本身。

您需要将以下代码添加到setupAutocomplete函数内的search_facet.js文件中： -

// Renders the results grouped by the categories they belong to.
this.box.data('uiAutocomplete')._renderMenu = function(ul, items) {
    var category = '';
    _.each(items, _.bind(function(item, i) {
      if (item.category && item.category != category) {
        ul.append('<li class="ui-autocomplete-category">'+item.category+'</li>');
        category = item.category;
      }

      if(this._renderItemData) {
        this._renderItemData(ul, item);
      } else {
        this._renderItem(ul, item);
      }

    }, this));
  };