Smart Search Textbox

• Download GeneralizedSmartSearch.zip - 47.6 KB

Introduction

This project is an updated version of the Type-Ahead suggest box article in CodeProject(http://www.codeproject.com/Ajax/typeahead.asp). There were lot of limitation in that project and I tried to overcome those limitations with this updated version. This is code is generalized and lot of property and methods are exposed for this purpose. Right now you have to populate data required for smartsearch in the UI layer or change the smartsearch code which will take care of fetching the data and rendering the same. The smartsearch code is very much dependant on the "SmartLookup.xml" file. The format of the file should be maintained for the smartsearch to Work. Column Name is case sensitive and should exactly match with the column name in dataset.

You can use smartsearch to display Key Value pair with a separator or on individual column.

Background

The concept is same as the TypeAhead suggest box, I created a custom server control which consists of a TextBox and a div object. The "keyUp" event of the Textbox triggers a request to the server, and expects the server to fetch the first 10 records (select the top 10 fields from the table where the field like "keyword%") to the browser in XML form.

At the client-end, which is the web browser, I employ three AJAXSLT functions, "xmlParse()", "xsltProcess()" and "el". "el()" is just a shortcut to "document.getElementById()". However "xmlParse" and "xsltProcess" are designed to parse XML, XSLT, and transform it into HTML.

The HTML output will be injected into the div object which is the drop down area intended for records selection.

I have made certain changes to the code, now user can override the Textchange event and write appropriate code on smartsearch textchange. It can be considered as a dropdown if you are displaying result as ID-Value Pair 3 properties are exposed to get SelectedID,SelectedText and SelectedValue(ID - Value).

Using the code

if the datatype of the column binded is of numeric type then in XML the columnname should be appended with char "s". SmartSearch class will take care of creating this column on that table.

 <Employee>



    <lookupName>Employee Search</lookupName>

    <SearchColumns>

      <SearchColumn active="true">

        <dataField>sEmployeeID</dataField>

        <heading>Employee #</heading>

        <dataType>int</dataType>

        <compareOperator>=</compareOperator>

      </SearchColumn>

      <SearchColumn active="true">

        <dataField>EmployeeName</dataField>

        <heading>Employee Name</heading>

        <dataType>string</dataType>

        <compareOperator>=</compareOperator>

      </SearchColumn>

    </SearchColumns>

    <columns>

      <column>

        <dataField>SmartIDName</dataField>

        <ExpressionString1>sEmployeeID</ExpressionString1>

        <ExpressionStringSeperator>' - '</ExpressionStringSeperator>

        <ExpressionString2>EmployeeName</ExpressionString2>

        <ConvertColumnToString> </ConvertColumnToString>

      </column>

    </columns>

  </Employee>

The dataType element can have any of the following three Enum value.

public enum ColumnDataType

{

INT,

STRING,

DATETIME,

}

DatatoBind Property of smartsearch should be populated with dataset having the values needs to be displayed to user. This should be populated on Page_Load event of the page where smartsearch is used.

XMLLookupType Property should specify which xml element needs to be picked up for displaying data. In the above sample it will be "Employee"

DefaultID Property should be equal to ID property of the control which is used in identifying control in JavaScript

Points of Interest

I wanted to minimize the number of it to the database, so the value fetched from the DB are stored in session variable and it is been used again and again as my data is static. I wanted to restrict no of records displayed(sent back to js callback function) without applying top keyword in the select query, following url http://forums.devx.com/showthread.php?t=153787 helped me in getting top record from dataset.