Question

Recently ive been searching for a good autocomplete plugin and I came across the visualsearch.js plugin. It really interested me. What I was wondering is instead of providing value matches for the facets that user selects, is it possible to get the value matches for the user input inside all the facet categories. Like if the user types in “AP”, user should get matches to word “AP” inside all facets likes “access”, “country”.

To explain correctly, I want to take both facet and matched values programatically. not through a fixed set of input. Ive found a way to do one is this way

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

so if we select job.name inside job facet, it should select the facet name as job : job.name instead of getting the displaying it as job.name: and again going for some value matches. im trying to integrate value matches and facet matches in to a single function so both takes place on single click.

My input to visual search callback is in JSONJ format. {"Regions":[{"name":"africa"}],"Company":[{"name":"google"}],"Persons":[{"name":"marc zuckerberg"},{"name":"matt romney"}]}

is it possible to achieve it using visual search?

Answer 1

You can try this , i had the same situation too.

Try mixing two plugins.

one was jquery auto complete and the other is http://ioncache.github.com/Tag-Handler/ to create tags

First I integrated to “Categories” and “multi values” script in to one and added facet categorywise division in auto complete..

then added http://ioncache.github.com/Tag-Handler/ so that tags are created on entering or on selection

This is the script part

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;
                }
            });
      });

and HTML part is

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

Thanks
Vineeth