KB: How to use AutoComplete outside of SearchBox, i.e. with a regular textbox.

Knowledgebase Home Page > SearchUnit

Search the Knowledge Base

How to use AutoComplete outside of SearchBox, i.e. with a regular textbox.
https://keyoti.com/kb/Default.aspx?ToDo=view&questId=215&catId=54

Options

Print this page
Email this to a friend

(For MVC users, please see this article for a more specific article.)

If for whatever reason you do not use the SearchBox control, but still need the AutoComplete functionality, this article will explain how to set up the scripts to work with any text box.

The following assumes you already have a page setup with a textbox (where the user enters queries) and a button (which the user clicks to trigger the search), and a SearchResult control (see full example below).

1. Copy the attached client files to a project folder, eg. scripts

2. Link to the client files using the appropriate path, eg. if the files are in a folder named scripts one folder up, then use

3. Add this block to your page, which configures the scripts

/*<![CDATA[*/

var sew_configs = new Array();

var sew_failSilent = false;

sew_configs[sew_configs.length] = {sew_queryTextBoxID : "se_tb",

sew_searchButtonID : "se_bt",

sew_indexDirectory : "~/IndexDirectory", //path to index dir

sew_numberOfSuggestions : "5",

sew_runSearchOnSelect : true,

sew_showNumberOfResults : false,

sew_searchPostback: "<%= Page.GetPostBackEventReference(se_bt) %>"

};

//]]>

</script>

in this example the ID of the textbox for which autocomplete will be attached is "se_tb", and the ID of the button which triggers the search is "se_bt". The index directory which will be used for the autocomplete is located under the app. at ~/IndexDirectory (as per our projects).

That should be all that is required, when the user types in the textbox "se_tb" a drop down should appear with complete query suggestions.

Complete Example

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register TagPrefix="searchengine" Namespace="Keyoti.SearchEngine.Web" Assembly="Keyoti2.SearchEngine.Web, Version=3.1.1.8902, Culture=neutral, PublicKeyToken=58d9fd2e9ec4dc0e" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

/*<![CDATA[*/

var sew_configs = new Array();

var sew_failSilent = false;

sew_configs[sew_configs.length] = {sew_queryTextBoxID : "se_tb",

sew_searchButtonID : "se_bt",

sew_indexDirectory : "~/IndexDirectory", //path to index dir

sew_numberOfSuggestions : "5",

sew_runSearchOnSelect : true,

sew_showNumberOfResults : false,

sew_searchPostback: "<%= Page.GetPostBackEventReference(se_bt) %>"

};

//]]>

</script>

public void Search_Click(object s, EventArgs e)

{

seres1.QueryExpression = se_tb.Text;

}

</script>

</head>

<body>

<div>

<asp:TextBox ID="se_tb" runat="server" />

<asp:Button ID="se_bt" runat="server" Text="Search" OnClick="Search_Click" />

<searchengine:SearchResult runat="server" ID="seres1" IndexDirectory="~/IndexDirectory">

</searchengine:SearchResult>

</div>

</form>

</body>

</html>

Troubleshooting

If it doesn't work, check the web.config to ensure the http handler section contains a link to our assembly. If it doesn't you can automatically generate one by viewing the SearchResult control in the VS designer, or manually add it, ensuring the version number is correct (see deployment section in the help for more)

</httpHandlers>