Question

最近我一直在寻找一个好的自动完成插件，我遇到了visualsearch.js插件。它真的让我感兴趣。我想知道的是，不是为用户选择的方面提供值匹配，而是可以在所有方面类别中获得用户输入的值匹配。就像用户输入＆＃34; AP＆＃34;一样，用户应该匹配单词＆＃34; AP＆＃34;所有方面都喜欢＆＃34; access＆＃34;，＆＃34; country＆＃34;。

为了正确解释，我想以编程方式获取facet和匹配值。不是通过一组固定的输入。我找到了一种方法来做这种方式

http://jsfiddle.net/HRuAP/49/

因此，如果我们在作业构面中选择job.name，则应选择构面名称为job : job.name，而不是将其显示为job.name:，并再次进行某些值匹配。我试图将值匹配和构面匹配集成到单个函数中，因此两者都是单击发生的。

我对视觉搜索回调的输入是JSONJ格式。 {"Regions":[{"name":"africa"}],"Company":[{"name":"google"}],"Persons":[{"name":"marc zuckerberg"},{"name":"matt romney"}]}

是否可以使用视觉搜索实现它？

Answer 1

你可以试试这个，我也有同样的情况。

尝试混合两个插件。

一个是jquery自动完成，另一个是http://ioncache.github.com/Tag-Handler/来创建标签

首先我将“类别”和“多值”脚本集成到一个并在自动完成中添加了facet categorywise分区。

然后添加了http://ioncache.github.com/Tag-Handler/，以便在输入或选择时创建标记

这是脚本部分

function split( val ) {
            return val.split( /,\s*/ );
        }

function extractLast( term ) {
            return split( term ).pop();
        }

$(document).ready(function(){
$(".methodButton").button();

                $("#callback_tag_handler").tagHandler({
                    autocomplete: false,
                    onAdd: function(tag) { console.log('Added tag: ' + tag); return 1; },
                    onDelete: function(tag) { console.log('Deleted tag: ' + tag); return 1; }
                });


  $.widget( "custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            var that = this,
                currentCategory = "";
            $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                    currentCategory = item.category;
                }
                that._renderItemData( ul, item );
            });
        }
    });  
       var data = [
            { label: "anders", category: "" },
            { label: "andreas", category: "" },
            { label: "antal", category: "" },
            { label: "annhhx10", category: "Products" },
            { label: "annk K12", category: "Products" },
            { label: "annttop C13", category: "Products" },
            { label: "anders andersson", category: "People" },
            { label: "andreas andersson", category: "People" },
            { label: "andreas johnson", category: "People" }
        ];

       $( ".tagInputField" )
            // don't navigate away from the field on tab when selecting an item
            .live( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).data( "autocomplete" ).menu.active ) {
                    event.preventDefault();
                }
            }).catcomplete({
                minLength: 0,
                source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        data, extractLast( request.term ) ) );
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
if(ui.item.category=" "){
terms.push("Text : "+ ui.item.value );
}else{
terms.push(ui.item.category+" : "+ ui.item.value );
}

                    // add placeholder to get the comma-and-space at the end
//addTag();
                    terms.push( "" );
                    this.value = terms.join( " " );
                    return false;
                }
            });
      });

和HTML部分

<div id="container">
            <ul id="callback_tag_handler"></ul>
</div>

由于比涅斯

在单个函数下集成visualsearch.js中的facet匹配和值匹配

1 个答案: