Skip to main content

Add search to your "Submit Ticket" form

This page applies to:MindTouch Responsive

Learn 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, the widget will take the subject field of the ticket form and use it to search MindTouch for results. Later, the document describes how to filter results according to page paths.

Note to user  NOTE:  The form will conduct a search when a user types in three characters or more and will search for five articles based on the subject keyword.


Once you complete the steps in this article, your support form should look similar to the one below.


You must already have created a "Submit Ticket" form

Create the search results area

Create a separate area to display search results with changes to the existing DekiScript code:

  1. Edit your current "Submit Ticket" form and find the following element and its closing tag:
<div class="mt-support-email">
  1. 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">
  1. 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 ticket form.
  1. In your div.left, add some simple markup, a title and an unordered list that will list out each individual search result. Add the ul element with an id of "submit-issue-search-results"
  2. Record the ul element 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;">
  1. Lastly, 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'] : '') />

Add search functionality

To enable the form to conduct a search, the JavaScript code below attaches a keyup event to your subject element, then conducts a search based off of that using ajax. Results are displayed in the ul element we created earlier in DekiScript):

  1. Add a block of JavaScript into your page.
  2. Copy and past the following code into the JavaScript block.  
(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});
  1. Save the template and run it.

Filter search results by path

This instructions outline how to add a select element to your form to filter search results based on a path:

  1. Identify the directories by which you want to filter. Let's assume you have the following directories:
  • en-us/Destinations/
  • en-us/Booking/
  • en-us/General_Safety/
  1. Next, create a new input section in your form (use the code below as your guide, replacing 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"</>

  1. 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() {;
  1. By attaching this event, the form will conduct a search every time a selection is changed.