3

最近、私は優れたオートコンプリートプラグインを探していましたが、visualsearch.jsプラグインに出くわしました。本当に興味がありました。私が疑問に思っていたのは、ユーザーが選択したファセットに値の一致を提供する代わりに、すべてのファセットカテゴリ内のユーザー入力の値の一致を取得することは可能ですか。ユーザーが「AP」と入力した場合と同様に、ユーザーは「アクセス」、「国」などのすべてのファセット内で「AP」という単語と一致する必要があります。

正しく説明するために、ファセット値と一致する値の両方をプログラムで取得したいと思います。固定された入力セットを介してではありません。私は1つを行う方法を見つけましたこの方法です

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"}]}

視覚探索を使用してそれを達成することは可能ですか？

4

1 に答える 1

1

あなたはこれを試すことができます、私も同じ状況でした。

2つのプラグインを組み合わせてみてください。

1つはjqueryオートコンプリートで、もう1つはタグを作成するためのhttp://ioncache.github.com/Tag-Handler/です。

まず、「カテゴリ」と「複数の値」のスクリプトを1つに統合し、オートコンプリートでファセットのカテゴリごとの分割を追加しました。

次に、 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>

ありがとうヴィニート

于 2012-12-05T07:15:44.627 に答える