Last Good Quote: Son's are the seasoning on our lives. - Someone on Facebook

Monday, September 16

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.

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:


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;

if (matches == null || matches.length == 0){
                                                      url: 'rdPage.aspx',
                                                      data: {rdReport:"",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 + " (" + + ")");


5. Modify the following:

  • "" - 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.


Post a Comment