Skip to main content

Add search to your "Contact Support" form (MT4)

The purpose of this document is to discuss how to set up a simple search widget that will work with the submit ticket form, and serve as a simple ticket deflection system. In this example, it will, take the subject field from the form, and use that to search MindTouch for results. Later, the document will describe how to filter results according to page paths.


Once you have finished following these instructions, you should have something that looks like this, It will conduct a search when you type in three characters or more, and it will search for five articles based on your Subject keyword.


In this example setup, we will start by creating a submit ticket form from scratch, using these instructions. Once you have your form setup, we will need to edit the DekiScript, and later on add some JavaScript.

DekiScript changes

In this step, we are going to create a separate area for the search results to render mark up in. To do this, edit your current submit issue form and find the element and its closing tag:

<div class="mt-support-email">

We will need to enclose the in its own container and create a new one, as a sibling.

<div class="left">
    <div class="mt-support-email">
<div class="right">

As you can see, we create a div with a class left, and a div with a class right:

  • div.left contains the search results
  • div.right contains the submit issue form.

In the div.class left, we will add some simple mark up, a title, and a unordered list, which will list out each individual search result. So in your div.left, we are going to add a ul element with an id of "submit-issue-search-results". It is important to note that the ul element's id, which we will be referencing later on in the JavaScript.

<div class="left">
    <h6>"Search Results"</>;
    <ul id="submit-issue-search-results" style="padding-left: 0px; list-style:none;">

Lastly, we are going to give the subject input field inside the form an id. In this example, we assign the subject input field an id of "submit-issue-subject".

<input class="mt-email-field required field full" type="text" id="submit-issue-subject" name="subject" maxlength="300" value=(#args['query'] ? args['query'] : '') />

JavaScript changes

Add in a block of JavaScript in your page, and paste in this code.  This code, attaches a keyup event to your subject element, then conducts a search based off that using ajax. It will display results in the ul element we created earlier.

(function($) {
    _.extend(Deki.ContactSupport.CustomSearch, {
    //Cache Elements
    $searchResults: $('#submit-issue-search-results'),
    $category: $('#category'),
    $subject: $('#submit-issue-subject'),

    //Define the search Function    
    search: function() {
        //Set the context of self, to Deki.ContactSupport.CustomSearch
        var self = Deki.ContactSupport.CustomSearch;
        //Subject is our #subject input box, retrieve the value. If no value, we dont want to conduct a search
        var subject = self.$subject.val() || '';
        if(!subject) {
        //In this example, #category is our select element, which contains option elements who's values are paths within our site
        var category = self.$category.val() || ''
        //Default namespace when searching
        var constraint = '+namespace:main';
        //Create the underscore template for search results
        var searchResultsTemplate = _('' +
            '<li>' +
                '<a href="<%- uri %>"><%- title %></a>' +
                '<div><%- content %></div>' +
            '</li>' +
        //Create the underscore template for an empty search
        var emptyTemplate = _('<li>No Results Found</li>').template();
        //Append the path constraint to our main constraint
        if(category) {
            constraint += ' AND +path.ancestor:' + category;
        //Construct the parameters object which will be used to query the site
        var params = {
            q: subject,
            constraint: constraint,
            limit: 5,
            format: 'search'
        //Create a new instance of a Deki Search, and run the query
        new Deki.SiteSearch().query(params, function(response) {
            var data =;
            if(data.result) {
                var searchResults = data.result instanceof Array ? data.result : [data.result];
                var html = '';
                //Go through each search result, and use the searchResultsTemplate to create the markup
                _(searchResults).each(function(searchResult) {
                    html += searchResultsTemplate(searchResult);
                //Display mark up in #submit-issue-search-results element, which in this case is our ul
            } else {
                //Display the no results found template in the #submit-issue-search-results element.
    $(function() {
        //run the delayed search helper on the #subject input element.
        Deki.DelayedSearch.init($('#submit-issue-subject'),, {timeout: 600, minimum: 3});

Once you have added the JavaScript, save the template and run it. You should come up with something like this:

Filtering search results by path

We will now add in a select element whose values are paths within are site. This will allow us to filter search results based on a path. In my site, I have the following directories,

  • en-us/Destinations/
  • en-us/Booking/
  • en-us/General_Safety/

Next, create a new input section within your form, you can use the code below as your guide, replacing the values with the paths of your page.

<div class="mt-field clear">
    <label class="ui-dform-label" for="description"> "Category" </>
        <select id="submit-issue-category" class="mt-email-field field" placeholder=("Please describe your issue.") name="description">
        <option value="en-us/Destinations">"Destinations"</>
        <option value="en-us/Booking">"Booking"</>
        <option value="en-us/General_Safety">"General Safety"</>

Where we declare the delayed search helper, near the bottom of the JavaScript, we are going to observe a new event on the select element we just created by using the code below:

$(document).on('change', '#submit-issue-category', function() {;

By attaching this event, it will conduct a search every time you change your selection.

  • Was this article helpful?