3

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

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

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

因此，如果我们在 job facet 中选择 job.name，它应该选择 facet name asjob : job.name而不是将其显示为job.name:并再次进行一些值匹配。我试图将值匹配和方面匹配集成到一个函数中，因此两者都发生在单击一次。

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

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

4

1 回答 1

1

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

尝试混合两个插件。

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

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

然后添加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>

谢谢 Vineeth

于 2012-12-05T07:15:44.627 回答