<p>You can use either <code>get</code> (via a direct link) or <code>post</code> (via javascript) which can be accessed in your search template using <code>[craft.request.getParam(name)][1]</code>, and then either display the template (if a direct link) or return it (via ajax) to your original template.</p>

<p>For a full example using <code>post</code> and ajax see <a href="https://craftcms.stackexchange.com/questions/2979/search-results-in-a-drop-list-popup-on-same-page/2980#2980">this question</a> or <a href="https://craftcms.stackexchange.com/questions/4414/search-contact-person-plugin-via-ajax/4415#4415">this question</a>. These examples use post and a form, but you could easily adapt this to place your variables in attributes and then retrieve and send those using javascript:</p>

<pre><code>&lt;a class="js-triggerhook" data-option="{{ field.option }}" data-category="{{ category }}" data-url="{{ siteUrl }}path/to/searchtemplate"&gt;Link&lt;/a&gt;
</code></pre>

<p>In javascript:</p>

<pre><code>$('.js-triggerhook').on('click', function(e) {
    e.preventDefault();
    var option = $(this).attr('data-option),
        category = $(this).attr('data-category'),
        url = $(this).attr('data-url'),
        data = "option=" + option + "&amp;amp;category=" + category;
    // send post data
    $.post(url, data, function(result) {
        $('#search-results').html(result);
    }, 'html');
})
</code></pre>

<p>Or for a direct link using <code>get</code>:</p>

<pre><code>&lt;a href="{{ siteUrl }}path/to/searchtemplate?option={{ option.field }}&amp;amp;category={{ category }}"&gt;Link&lt;/a&gt;
</code></pre>

<p>Or for a way to do either on the fly, just by including the class 'js-sendAsAjax':</p>

<pre><code>&lt;a class="js-sendAsAjax" href="{{ siteUrl }}path/to/searchtemplate?option={{ option.field }}&amp;amp;category={{ category }}"&gt;Link&lt;/a&gt;
</code></pre>

<p>Then in your javascript:</p>

<pre><code>$('.js-sendAsAjax').on('click', function(e) {
   e.preventDefault();
   var href = $(this).attr('href').split('?'),
       url = href[0],
       data = href[1];
    $.post(url, data, function(result) {
        $('#search-results').html(result);
    });
});
</code></pre>

CC BY-SA 3.0
2014-11-03T19:54:33.777Z
2014-11-03T22:09:02.677Z
2017-04-13T12:51:00.200Z
Douglas McDonald
<p>Ok what i'm trying to achieve is a set of links which have "search parameters" attached to them. Which would be a "category" and an "option.field".</p>

<p>Then when these links are clicked they display search results according to the parameters.</p>

<p>Not sure even where to start with something like this, could it be achieved with data attributes?</p>

<p>Is it even possible? Or have would I have to jerry-rig a form to do this via radio buttons?</p>

<p>Thanks for any help you can give.</p>

<categories><relations><search><fieldtypes>
Linking to Search Results
# Linking to Search Results

(Asked by: username_0 on 2014-11-03)

Ok what i'm trying to achieve is a set of links which have "search parameters" attached to them. Which would be a "category" and an "option.field".

Then when these links are clicked they display search results according to the parameters.

Not sure even where to start with something like this, could it be achieved with data attributes?

Is it even possible? Or have would I have to jerry-rig a form to do this via radio buttons?

Thanks for any help you can give.

**Tags:** categories, relations, search, fieldtypes

---

## 1 answers

### Answer by username_1 on 2014-11-03. Score: 4 | Accepted answer

You can use either get (via a direct link) or post (via javascript) which can be accessed in your search template using [craft.request.getParam(name)][1], and then either display the template (if a direct link) or return it (via ajax) to your original template.
For a full example using post and ajax see this question or this question. These examples use post and a form, but you could easily adapt this to place your variables in attributes and then retrieve and send those using javascript:
Link

In javascript:
$('.js-triggerhook').on('click', function(e) {
    e.preventDefault();
    var option = $(this).attr('data-option),
        category = $(this).attr('data-category'),
        url = $(this).attr('data-url'),
        data = "option=" + option + "&category=" + category;
    // send post data
    $.post(url, data, function(result) {
        $('#search-results').html(result);
    }, 'html');
})

Or for a direct link using get:
Link

Or for a way to do either on the fly, just by including the class 'js-sendAsAjax':
Link

Then in your javascript:
$('.js-sendAsAjax').on('click', function(e) {
   e.preventDefault();
   var href = $(this).attr('href').split('?'),
       url = href[0],
       data = href[1];
    $.post(url, data, function(result) {
        $('#search-results').html(result);
    });
});


---

