Post
Ask Question
sam

sam

  • NA
  • 202
  • 0

Highlight search results

Aug 16 2010 4:31 AM
Hi!
I have a search function here,where it will capture every keypress in the textbox and produce the results immediately in gridview (live search).

Now i m having problem to highlight the search results in the gridview.
Lets say, i type goo in the textbox,google name will appear in gridview and only the word goo will be highlighted in the gridview.

Now,when i type the keyword in the textbox, the it will highlight the matching word but the word highlight will dissapeared.

Here is my aspx code :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HighlightTest1._Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register Assembly="RealTimeSearch" Namespace="RealTimeSearch" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" onClick="highlightText()">
<head id="Head1" runat="server">
<script src="jquery-1.4.2.js" type="text/javascript"></script>
    <title>Search Highlight</title>
    <style type="text/css">
        SPAN.searchword { background-color:yellow; }
    </style>
    <script src="searchhi.js" type="text/javascript" language="JavaScript"></script>
  <script src="http://www.tedpavlic.com/links/js/searchhi_slim.js" type="text/javascript"></script>

</head>
<body onload="highlightText()">
    <form id="form1" runat="server" >
    <div>
         <script type="text/javascript">
        function highlightText() {
            var textBox = document.getElementById('<%=searchText.ClientID%>');
            if(textBox.value.length > 1) {
                localSearchHighlight(textBox.value);
            }
        }
        </script>

    </div>
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
       <asp:TextBox ID="searchText"  runat="server" onKeyPress="highlightText()"></asp:TextBox>
       <asp:Button ID="btnSubmit"  text="submit" runat="server" />

       <cc1:RealTimeSearchMonitor ID="RealTimeSearchMonitor1"  AssociatedUpdatePanelID="UpdatePanel1"
         runat="server">
         <ControlsToMonitor>
            <cc1:ControlMonitorParameter
                TargetId="searchText" />
        </ControlsToMonitor>
         </cc1:RealTimeSearchMonitor>
        <cc1:RealTimeSearchMonitor ID="RealTimeSearchMonitor2" runat="server"
            AssociatedUpdatePanelID="UpdatePanel1">
   <ControlsToMonitor>
            <cc1:ControlMonitorParameter
                TargetId="Gridview1" />
        </ControlsToMonitor>
        </cc1:RealTimeSearchMonitor>

        <hr />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

                <br />
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                    DataKeyNames="Company_Name" DataSourceID="SqlDataSource1" CellPadding="4"
                    ForeColor="#333333" GridLines="None">
                    <RowStyle BackColor="#EFF3FB" />
                    <Columns>
                        <asp:BoundField DataField="Company_Name" HeaderText="Company_Name"
                            ReadOnly="True" SortExpression="Company_Name" />
                        <asp:BoundField DataField="Phone_1" HeaderText="Phone_1"
                            SortExpression="Phone_1" />
                        <asp:BoundField DataField="Fax_1" HeaderText="Fax_1" SortExpression="Fax_1" />
                        <asp:BoundField DataField="Sales_Agent" HeaderText="Sales_Agent"
                            SortExpression="Sales_Agent" />
                        <asp:BoundField DataField="Email_Address" HeaderText="Email_Address"
                            SortExpression="Email_Address" />
                    </Columns>
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <EditRowStyle BackColor="#2461BF" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <br />
                <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                    ConnectionString="<%$ ConnectionStrings:C:\PROGRAM FILES\MICROSOFT SQL SERVER\MSSQL.1\MSSQL\DATA\DATABASE1.MDFConnectionString %>"
                    SelectCommand="SELECT * FROM [Table1] WHERE ([Company_Name] LIKE '%' + @Company_Name + '%')">
                    <SelectParameters>
                        <asp:ControlParameter ControlID="searchText" Name="Company_Name"
                            PropertyName="Text" Type="String" />
                    </SelectParameters>
                </asp:SqlDataSource>
                <asp:Label ID="Label2" runat="server" Text="Test Highlight 1" ></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:Label ID="Label1" runat="server" Text="Test Highlight 2"></asp:Label>


        </form>
</body>
</html>

could anyone see any errors in this code?
any suggestion/modification to the code?