Skip to main content
NICE CXone Expert
Expert Success Center

Add Search to Your "Submit Ticket" Form (Legacy)

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.

DEPRECATED! This integration described in this article is obsolete and has been replaced with a Search-in-Place Touchpoint integration.

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 Expert for results. Later, the document describes how to filter results according to page paths.

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.

Prerequisite


You must already have created a "Submit Ticket" form

How to Add Search to Your Ticket Submission Form


Step 1: 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">
    FORM AND ALL THE DIVS CONTENT HERE ...
</> 
  1. Enclose the div.mt-support-email in its own container and create a new one as a sibling.
<div class="left">
    <div class="mt-support-email">
        ...
    </>
</div>
<div class="right">
</div> 
  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;">
    </ul>
</div>
  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'] : '') />

Step 2: 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 on 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($) {
    Deki.provide('Deki.ContactSupport.CustomSearch');
    _.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) {
            return;
        }
        
        //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>' +
        '').template();
        
        //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 = response.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
                self.$searchResults.html(html);
            } else {
            
                //Display the no results found template in the #submit-issue-search-results element.
                self.$searchResults.html(emptyTemplate());
            }
            });
        }
    });
    $(function() {
    
        //run the delayed search helper on the #subject input element.
        Deki.DelayedSearch.init($('#submit-issue-subject'), Deki.ContactSupport.CustomSearch.search, {timeout: 600, minimum: 3});
    });
})(jQuery);
  1. Save the template and run it.

Step 3: Filter Search Results by Path

These 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"</>
    </>
</div>

  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() {
    Deki.ContactSupport.CustomSearch.search();
});
  1. By attaching this event, the form will conduct a search every time a selection is changed.
  • Was this article helpful?