Low search keywords + tagger tags + select2?

Question

I'm trying to build a low search field that displays one visible predictive select2 input field that pulls in suggestions from a devdemon tagger field, as well as the last x most popular search terms. These options will probably generated with the template rather than an ajax behaviour as the list won't be huge and it would be faster to do it that way I think.

The ideal behaviour would be this: when the user starts typing, I suggest matching words based on tags/previous searches. If they select a tag from the list, I run a tag field search based on that tag; if they select a previous search term I run a keyword search based on that phrase. If they don't select any matching suggestions I run a keyword search based on what they typed.

Ideally I'd like them to be able to select more up to two suggestion combinations.

My question is - should I have one visible select2 input field, but populate hidden search fields when selections are made? (eg call the select field 'keywords' and also have a hidden field called 'tags' (or whatever my tag field is called)?

What's the best way (if any) to achieve this?

My fallback would be to remove the recent search suggestions and simply suggest tags, but still allow them to enter a keyword search. The same question applies to the fallback situation...!

Answer 1

Ok I figured this out; I build a hidden keywords value that searches against multiple fields (including the tag field). My code (simplified a little) looks like this (where stash:_whichSearch returns 'resources'):

<script>
    var selectData = [{id:'Year+group','text':'Year group'}...]
</script>

{exp:low_search:form query="{segment_2}" required="keywords" form_id="{stash:_whichSearch}Search" collection="{stash:_whichSearch}" result_page="{stash:_whichSearch}/search"}
    <select class="js-example-data-array" multiple="" data-tags="true" data-placeholder="Search our {stash:_whichSearch}"></select>
        <input name="keywords" id="keywords" value='' type="hidden">
        <button type="submit" class="expand">Search</button>
{/exp:low_search:form}

and my jquery looks like this:

/* resources search */
    $(".js-example-data-array").select2({
        data: selectData,
        multiple: true,
        maximumSelectionLength: 2,
        minimumInputLength: 2,
        tags: true
    });

    var $eventSelect = $(".js-example-data-array");     
    $eventSelect.on("change", function (e) { 
        $("#keywords").empty();
        var objArr = $eventSelect.select2('data');
        var searchTerms = $.map( objArr, function( i, item ) {
            return('"'+i.text+'"')
        }).join('+');
        $("#keywords").val( searchTerms );
    });