Knowledgebase Home Page  >  SearchUnit
Search the Knowledge Base
How to add an autocomplete search box to an MVC project
https://keyoti.com/kb/Default.aspx?ToDo=view&questId=267&catId=54

Options

Print this page
Email this to a friend

This article is relevant to Search 2012 and older.  SearchUnit v6 upwards includes a JavaScript based client interface that works with MVC out of the box.


It’s possible to have an autocomplete enabled search box in an MVC project, without using the SearchBox control.  Instead the necessary Javascript and CSS is referenced directly.

 

HTML / Javascript changes

Copy these scripts from C:\Program Files(x86)\Keyoti Inc\Search for ASP.NET 2012\Keyoti_SearchEngine_Web_Common (or wherever they were installed on your machine):

Core.js

AutoComplete.js

to your project’s Scripts folder, and copy

AutoComplete.css

to your project’s Content folder

 

Reference these files from your page, eg. as old fashioned script/link tags, or using bundles (add the following to your App_Start\BundleConfig):

bundles.Add(new ScriptBundle("~/bundles/autocomplete").Include("~/Scripts/core.js", "~/Scripts/autocomplete.js"));

bundles.Add(new StyleBundle("~/Content/autocompletecss").Include("~/Content/autocomplete.css"));

 

 

Wherever you wish to use the autocomplete search box, add this to the page:

 <script type='text/javascript'>

        /*

        varsew_configs = new Array();

        varsew_failSilent = false;

       sew_configs[sew_configs.length] = {

           sew_queryTextBoxID:"se_tb",

           sew_searchButtonID:"se_bt",

            sew_indexDirectory:"~/Content/IndexDirectory", //pathto index dir

           sew_numberOfSuggestions:"5",

           sew_runSearchOnSelect:true,

           sew_showNumberOfResults:false,

           sew_searchPostback: "searchForm.submit();",

            sew_appPath: "/",

           sew_autoCompleteQueryLoadPlugin: false,

           sew_source: "PopularSearchesAndLexicon",

           sew_hideNoResulters: false

        };

 

        var sew_OC= new Object();

        //]]>

    </script>

 

Notice that the parts in bold reference element IDs and the search IndexDirectory path (which in this case is under the“Content” project folder).

 

Register ASHX handler

Register the autocomplete handler (.ASHX) in your web.config – note that your DLL version number may be different to this article, so use Explorer’s file->properties to find out your DLL version number:

 

(Inside <system.web>)

 

    <httpHandlers>

      <add path="Keyoti.SearchEngine.Web.CallBackHandler.ashx" type="Keyoti.SearchEngine.Web.CallBackHandler,Keyoti4.SearchEngine.Web, Version=2012.5.13.1031, Culture=neutral,PublicKeyToken=58d9fd2e9ec4dc0e" verb="*" validate="false" />

    </httpHandlers>

 

(Inside <system.webServer/handlers>)

<add name="Keyoti_SearchEngine_Web_CallBackHandler_ashx" verb="*" preCondition="integratedMode" path="Keyoti.SearchEngine.Web.CallBackHandler.ashx" type="Keyoti.SearchEngine.Web.CallBackHandler,Keyoti4.SearchEngine.Web, Version=2012.5.13.1031, Culture=neutral,PublicKeyToken=58d9fd2e9ec4dc0e" />

 

(Inside < system.webServer>)

   <staticContent>

      <mimeMap mimeType="text/html" fileExtension=".ashx" />

    </staticContent>

 

The AJAX calls will be made to the .ashxhandler, so it is vital that calls to .ashx files are not handled by acontroller instead.  To RegisterRoutes (in RouteConfig) add

routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");

 

A working demo project is attached.


Related Questions:

Attachments: