XMOD Pro & jQuery Auto-Complete/Suggest

For this example we will take an existing jQuery plugin that supports JSON as a datasource and integrate our data by leveraging XMOD Pro's templates and feeds!

Take a look at the demo on this page: (link has been removed due to malware at the destination)

You should be able to incorporate this method into any plugin that supports JSON as a data-source, or if you're super-motivated, write your own plugin!

Step 1: Choose your Data

Create or select an existing table to use and populate it with data. You'll be able to select which fields are captured for the auto-suggest later, so just focus on the data you want to feed into the plugin. In this tutorial we're focusing on the auto-suggest, so if you're unsure of how to create a table and populate it with a form, please refer to the documentation or other articles.

Example Table:

• ProductID
• ProductName
• ProductImage
• ProductSummary
• ProductTags

Step 2: Create your Stored Procedure and Function to Retrieve Data

UPDATE: Starting with XMP 4.3 there's a new tag that you can use in your feed that replaces the typical use of the SQL function we're about to create. If you have XMP 4.3 or later, you can skip creating the function!

JSON can be a bit touchy, which is why we need to make sure that certain characters in our data doesn't break the JSON format. We'll create a Stored Procedure and a custom function that encodes our results.

Create your Function

    USE [YourDatabaseName]
    GO
    SET ANSI_NULLS ON
    GO
    SET QUOTED_IDENTIFIER ON
    GO
    CREATE FUNCTION [dbo].[fn_JSEncode] 
    (
      @p1 nvarchar(1000)
    )
    
    RETURNS nvarchar(1000)
    AS
    BEGIN
     -- Declare the return variable here
     DECLARE @retVal nvarchar(1000)
    
     -- Add the T-SQL statements to compute the return value here
     SET @retVal = (SELECT REPLACE(REPLACE(REPLACE(@p1,CHAR(13),'\r'),CHAR(10),'\n'),'"','\"'))
    
     -- Return the result of the function
     RETURN @retVal
     END
     

Create your Procedure If you're using XMP 4.3 or later, you can skip attaching the function to your stored procedure.

     USE [YourDatabaseName]
     GO
     SET ANSI_NULLS ON
     GO
     SET QUOTED_IDENTIFIER ON
     GO
     CREATE PROCEDURE [dbo].[MyAwesomeSearch]
     AS
     BEGIN
     SET NOCOUNT ON;
     SELECT
      -- Attach your function to your fields  
       dbo.fn_JSEncode(ProductID) AS [ProductID]
      ,dbo.fn_JSEncode(ProductName) AS [ProductName]
      ,dbo.fn_JSEncode(ProductSummary) AS [ProductSummary]
      ,dbo.fn_JSEncode(ProductTags) AS [ProductTags]
      ,ltrim(rtrim(isnull([ProductImage], ''))) AS ProductImage
    
    FROM [ProductTable]
    END
    

Step 3: Create your Feed

1. Navigate to your XMP Control Panel
2. Click on Feeds
3. Create a new feed

New to XMP 4.3: If you skipped creating the function and want to take advantage of the new tag, pay close attention to the comments below!

    
	

    
    

    
    

    
     [ 

    

	
		{
        "productname":"[[ProductName]]",
        "productimage":"/pathtoyourimages/[[ImageFile]]",
        "productsummary":"[[ProductSummary]]",
        "productlink":"/pathtoyourproductpage/productdetail.aspx?ProductID=[[ProductID]],
        "tags":"[[ProductName]],[[ProductSummary]],[[ProductTags]]"
        
		}
	

    
	
     , 
  
    
     ] 

    
    

    
    
    

Step 4: Create your search box!

On to the fun part! You can actually create your search box directly in your skin, or you can use an XMP Template. You can even attempt to use an HTML Module, but they usually do evil things to your code unless you know how to change those settings.

There's nothing XMod Pro specific about the search function, so create whatever solution works best for your situation.

The documentation of this plugin instructs us to upload the appropriate script files to our server, and we need to link those in the

All done!

The only other thing to note here is I didn't include the CSS files that came with the plugin. I defined my own styles in my skin.css.

Give it a try!