Add Search to Your "Submit Ticket" Form (Legacy)
- Applies to:
- MindTouch TCS & 4 (legacy)
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.
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:
- 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 ... </>
- 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>
- 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.
- 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"
.
- 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>
- 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):
- Add a block of JavaScript into your page.
- 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);
- 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:
- 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/
- 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>
- 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(); });
- By attaching this event, the form will conduct a search every time a selection is changed.