Logi Analytics - jQuery Auto-complete

This would be the third time I've been asked to incorporate some type of auto-complete function using jQuery and Logi elements.

Here is my cheat sheet:

1. First create a report that returns the results you want in your auto-complete drop down:

• @Request.q~ will have what the user typed
• Keep it simple and quick as this will impact response times
• A single data layer and data table is typically enough

2. Include the jquery script files, I've not had a lot of issues with versioning, so anything over 9 should be fine.

• http://code.jquery.com/jquery-1.9.1.js
• http://code.jquery.com/ui/1.10.3/jquery-ui.js

3. Add a user input element with an ID of inptSearchText

4. Add the following script in a script tag, typically at the bottom of the page:


$(document).ready(function(){

  $("#iptAutoComplete").autocomplete({
minLength: 2,                       
delimiter: /(,|;)\s*/, // regex or character 
source:  function(request, response) 
{
                                    var matches = null;
var data = null;
                                    if(data != null )
{
                                          matches = $.map(data, function(tag) {                                         
                                                if ( tag.value.match(new RegExp("^" +request.term, "i"))){
                                                return tag;
                                                }
                                    });   
                                          response(matches);
                                    }

if (matches == null || matches.length == 0){
                                          $.ajax({
                                                      url: 'rdPage.aspx',
                                                      data: {rdReport:"jQuery.search",rdReportFormat:"DataLayerXml", q:request.term },
                                                      dataType: 'xml',
                                                      success: function( xmlResponse ) {
                                                            data = $( "dtSearchResults", xmlResponse ).map(
                                                                        function() {
                                                                              return {
                                                                                    value: $(this).attr("FORMATTED_NAME"),
                                                                                    id: $(this).attr("EMP_ID")
                                                                              };
                                                                        });
                                                                  response(data.slice(0, 10));   
                                                            }
                                          })
                                    }
                              },
select: function(event, ui)
{ 
alert("you have selected " + ui.item.value + " (" + ui.item.id + ")");
        }
});

});


5. Modify the following:

• "jQuery.search" - replace with the name of the report from step 1
• FORMATTED_NAME needs to be your displayed value from prior table
• EMP_ID needs to be the id you want triggered with the specific data set
• minLength:2 - Set this to the number of characters the user types before triggering the AJAX call
• alert(....) - Call your own javascript function or re-direction after selection. Typically you would store the ID in some hidden variable for future usage.