Optionally provide private feedback to help us improve this article...

Thank you for your feedback!


Adding the InstantKB search bar to your site

 The following example static HTML page shows how to include the InstantKB search bar within your own pages. This can be helpful if you wish to allow your users to search your InstantKB articles from an external web site.

The InstantKB search bar offers live suggestions from your InstantKB database as users type a search query. You can see how the complete example looks below...

 This includes the full auto suggest functionality with paging as shown below...

The HTML Page

The following code was prepared with InstantKB 2016-3. You will need InstantKB 2016-1 or above to use the example code below.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    
    <!-- include InstantKB css files -->
    <link type="text/css" rel="stylesheet" href="http:///yoururl/skins/classic/styles/core.css" />
    <link type="text/css" rel="stylesheet" href="http://yoururl/InstantKB2016/skins/classic/styles/theme.css" />
    <!-- include InstantKB JavaScript-->
    <script src="http://yoururl/InstantKB2016/js/core.js" type="text/javascript"></script>
    
</head>
<body>
    
<script type="text/javascript">
    var Sys = {}; // optional only for non-web form pages
</script>
    
<div style="width: 60%; margin: 42px auto">
    <!-- InstantKB search bar -->
    <div class="i-search-input i-search-suggest" data-parent="body" data-auto-suggest="true">
        <input id="keywords"/>
        <a href="javascript:void(0);" class="i-search-button i-search-button-main ikb-search-button">
            <span><i class="fa fa-search"></i></span>
        </a>
    </div>
    <!-- /InstantKB search bar -->
</div>
    
<script type="text/javascript">

    (function($, win, doc) {
        $(doc)
            .ready(function() {

                var kbUrl = 'http://yoururl/InstantKB2016/';

                $('.i-search-suggest')
                    .searchSuggest({
                        url: kbUrl,
                        args: {
                            user_id: '0',
                            enable_role_check: true
                        },
                        onResultClick: function(result) {
                            window.location = result.url;
                        },
                        onSubmit: function(self, e) {
                            var keywords = self.opts.args.keywords;
                            self.getResultMenu().hide();
                            if (keywords) {
                                win.location.href = kbUrl + 'Search.aspx?keywords=' + encodeURIComponent(keywords);
                            } else {
                                self.$input.focus();
                            }
                            return false;
                        }
                    });
            });
    })(jQuery, window, document);
</script>
    

</body>
</html>
 

 

Cross Origin Request Security

Under the covers the InstantKB search bar calls the InstantKB REST API to return JSON representing the search results. The returned JSON is used to present the search suggestion below the search bar as users type.

 For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. If you use the code above on a different domain than that used for your InstantKB installation you may need to allow cross origin requests. Further information on how to achieve this is detailed below.

Updating Your InstantKB web.config

To allow cross origin requests you will need to add the following tags into your InstantKB web.config...

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE,     OPTIONS" />
  </customHeaders>
</httpProtocol>

In addition to the web.config elements above you may need to upda the InstantKB Global.asax.cs file to handle cross origin option requests. If you see the error "Response for preflight has invalid HTTP status code 405" within your browser console when typing within the InstantKB search bar you will need to update your InstantKB Global.asax.cs as shown below. The new code you may need to add has been highlighted...

using System.Web.Http;
using System.Linq;

namespace InstantASP.InstantKB.UI.Pages
{

    partial class Global : UI.Base.Global
    {

        protected override void Session_Start(object sender, System.EventArgs e)
        {
            base.Session_Start(sender, e);
        }

        protected override void Application_Start(object sender, System.EventArgs e)
        {
     
            // web API routes
            InstantKB.WebAPI.WebApiConfig.Register(GlobalConfiguration.Configuration);
            
            base.Application_Start(sender, e);

        }

        protected override void Application_End(object sender, System.EventArgs e)
        {
            base.Application_End(sender, e);
        }


        protected void Application_BeginRequest()
        {
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.Flush();
            }
        }


    }

}

That's It!

Once you've considered CORS as shown above you should notice as you type within the InstantKB search bar results from your InstantKB database will be displayed below the search bar. You can also hit return within the search bar to be taken right to the full InstantKB search results page.We hope this helps those that are looking to implement the InstantKB search within their web site. Of course if we can assist please don't hesitate to submit a new support request.