Using two different templates for search results - Haystack

Question

I am totally confused how I can use two different template files for the search results. Suppose I have two different pages for searching and I want to have different decorations for each page search results.

This search bar is in one page:

<div class="main-header_search">
                <form method="get" action="/search1" id="header_find_form" class="main-search yform" role="search"
                      data-component-bound="true">
                    <div class="arrange arrange--middle arrange--6">
                        <div class="arrange_unit" style="width: 100%;">
                            <div class="main-search_suggestions-field search-field-container find-decorator">
                                <label class="main-search_pseudo-input pseudo-input">
                                    <span class="pseudo-input_text">Find</span>
                                    <span class="pseudo-input_field-holder">
                                        <input autocomplete="off" type="search" id="id_q" maxlength="64" name="q"
                                               placeholder="Cheap dinner, Cafe" value=""
                                               class="main-search_field pseudo-input_field"
                                               aria-autocomplete="list" tabindex="1" data-component-bound="true">
                                    </span>
                                </label>

                                <div class="main-search_suggestions suggestions-list-container search-suggestions-list-container hidden"
                                     data-component-bound="true">
                                    <ul class="suggestions-list" role="listbox" aria-label="Search results"></ul>
                                </div>
                            </div>
                        </div>
                        <div class="arrange_unit main-search_actions">

                            <button class="ybtn ybtn-primary main-search_submit" id="header-search-submit"
                                    tabindex="3"
                                    title="Search" type="submit" value="search">
                                <i class="i ig-common_sprite i-search-common_sprite"></i>


                            </button>
                        </div>
                    </div>
                </form>

            </div>

And this is in another page:

<form method="get" name="business_search_form" class="yform business-search-form"
                  action="/search2" role="search">
                <div class="arrange arrange--6 arrange--stack">
                    <div class="arrange_unit arrange_unit--fill">
                        <div class="arrange arrange--equal arrange--6 arrange--stack">
                            <div class="arrange_unit">
                                <label class="responsive-visible-small-block hidden-non-responsive-block">Business
                                    Name</label>

                                <div class="pseudo-input business-find-decorator">
                                    <div class="flex-container-inline">
                                        <div class="label responsive-hidden-small">Business Name</div>
                                        <div class="flex-box input-holder">
                                            <input class="landing-search-biz-name" placeholder="e.g. Mel's Diner"
                                                   name="q" autocomplete="off" type="text">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="arrange_unit nowrap">
                        <button type="search" value="search"
                                class="ybtn ybtn-primary yform-search-button ybtn-full-responsive-small"><span><span
                                class="i-wrap ig-wrap-common i-search-dark-common-wrap"><i
                                class="i ig-common i-search-dark-common"></i> Get Started</span></span></button>
                    </div>
                </div>
            </form>

I would like to use something like this in urls.py to have two different templates for each search results:

(r'^search1/', include('haystack.urls'), name='template1'),
(r'^search2/', include('haystack.urls'),name='template2'),

I am using simple haystack backend in my setting.py:

HAYSTACK_CONNECTIONS = {
    'default': {
        'ENGINE': 'haystack.backends.simple_backend.SimpleEngine',
    },
}

Answer 1

Here is how I would do it:

First, create a search form that inherits haystack's SearchForm:

class ItemSearchForm(SearchForm):
    def search(self, request):
        items = super(ItemSearchForm, self).search().models(Item)  // Item is your model name
        shops = super(ItemSearchForm, self).search().models(Shop)
        return {'items': items, 'shops': shops}

Second, create views that uses this form:

def searchItems(request):
    form = ItemSearchForm(request.GET)
    results = form.search(request)
    return render(request, 'search/search.html', {
        'items': results['items']
    }) 

def searchShops(request):
    form = ItemSearchForm(request.GET)
    results = form.search(request)
    return render(request, 'search/search.html', {
        'shops': results['shops']
    })

Please note that these two views use different return values. You can change it to fix your situation.

Then, configure urls:

(r'^search1/', 'views.search1', name='search1'),
(r'^search2/', 'views.search2', name='search2'),

The only thing left to do, write your indexes file and documents. This should do it.