[CLOSED] Search

**Vasudhaika** · Nov 03, 2010, 12:47 PM

hi,

i have kept one textfield to search..user has to type text and click on button to search..
how to keep textfield as like google search textfield.. when i type text, a dropdown list should appear before pressing enter key or clicking on button...
and also restrict the user to type minimum 3 characters to search if he type less than 3 characters it should display a message "type atleast 3 characters"...

**Daniil** · Nov 03, 2010, 1:29 PM

Hi,

I would suggest you to start with investigating of the following example.
https://examples1.ext.net/#/Form/Com...Custom_Search/

The same example for 0.8.x toolkit's versions you can fing in the toolkit's source (see Coolite.Examples project).

**Vasudhaika** · Nov 03, 2010, 1:58 PM

Originally Posted by Daniil

Hi,

I would suggest you to start with investigating of the following example.
https://examples1.ext.net/#/Form/Com...Custom_Search/

The same example for 0.8.x toolkit's versions you can fing in the toolkit's source (see Coolite.Examples project).

sorry im unable to get 0.8.x toolkit's version ( Coolite.Examples project).

**Daniil** · Nov 03, 2010, 2:02 PM

Please clarify do you have the toolkit's source code from the SVN?

**Vasudhaika** · Nov 03, 2010, 2:09 PM

Originally Posted by Daniil

Please clarify do you have the toolkit's source code from the SVN?

this my code

 <ext:Panel ID="pnlStockRegControls" runat="server" Header="false" Frame="true" Height="50">
                    <Body>
                        <table >
                            <tr class="RowsHeight">
                            <td width="80px">
                              <ext:Label ID="lblStartDate" runat="server" Text="Search:" Icon="Magnifier" />
                            </td>
                                <td >
                                  
                                    <ext:TextField ID="txtSearch"   runat="server" Width="300"  Grow="False">                                  
                                    
                                    </ext:TextField>                                 
                                 
                                </td>
                                <td width="10" />
                                <td width="60px">
                                    <ext:Button ID="btnSearch" runat="server" Text="Go" Icon="BookGo" OnClientClick="return ValidateSearch(txtSearch);">
                                        <AjaxEvents>
                                            <Click OnEvent="btnSearch_Click">
                                                <EventMask ShowMask="true" />
                                            </Click>
                                        </AjaxEvents>
                                    </ext:Button>
                                </td>

  </tr>
                        </table>
                    </Body>
                </ext:Panel>




 protected void btnSearch_Click(object sender, EventArgs e)
        {
            try
            {

                LoadGrid();
            }
            catch (Exception ex)
            {
                Ext.Msg.Alert("error:", "'" + ex.Message.ToString() + "'").Show();
            }


        }


 public void LoadGrid()
        {
            int count;
            int userID = 0, yardID = 0;
            if (Session["UserId"] != null) { userID = Convert.ToInt32(Session["UserId"]); }
            if (Session["YARDID"] != null) { yardID = Convert.ToInt32(Session["YARDID"]); }
            stoUser.DataSource = controller.SearchTraders("FirstName", 0, 10, "ASC", out count, txtSearch.Text.Trim(), userID, yardID,"");
            stoUser.DataBind();
            
        }

**Vladimir** · Nov 03, 2010, 2:58 PM

Hi,

Please investigate the sample which Daniil mentioned

I would suggest you to start with investigating of the following example.
https://examples1.ext.net/#/Form/Com...Custom_Search/

That example for 0.8.x you can get in SVN
http://svn.ext.net/premium/tags/0.8..../Custom_Search

**Vasudhaika** · Nov 06, 2010, 10:00 AM

Originally Posted by Vladimir

Hi,

Please investigate the sample which Daniil mentioned

That example for 0.8.x you can get in SVN
http://svn.ext.net/premium/tags/0.8..../Custom_Search

i have applied your code..if i type a text in combo it is displaying all the records ..it should display related records what i have typed (example if i type yah ,it should display related records like yahoo,yahoo.com )..please solve my problem

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ComboSearch._Default" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!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" >
<head runat="server">
    <title>Untitled Page</title>
    
    <style type="text/css">
        .search-item {
            font          : normal 11px tahoma, arial, helvetica, sans-serif;
            padding       : 3px 10px 3px 10px;
            border        : 1px solid #fff;
            border-bottom : 1px solid #eeeeee;
            white-space   : normal;
            color         : #555;
        }
        
        .search-item h3 {
            display     : block;
            font        : inherit;
            font-weight : bold;
            color       : #222;
        }

        .search-item h3 span {
            float       : right;
            font-weight : normal;
            margin      : 0 0 5px 5px;
            width       : 100px;
            display     : block;
            clear       : none;
        } 
        
        p { width: 650px; }
        
        .ext-ie .x-form-text { position : static !important; }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    
      <ext:ScriptManager ID="ScriptManager1" runat="server" InitScriptMode="Inline" CleanResourceUrl="false" >
</ext:ScriptManager>





<ext:Store ID="stoUser" runat="server" >
 <Reader>
  <ext:JsonReader >
   <Fields>
    <ext:RecordField Name="employee_name" />
    <ext:RecordField Name="employee_no" />
   </Fields>
  
  </ext:JsonReader>
 </Reader>
</ext:Store>

<ext:Window ID="wind" runat="server" CenterOnLoad="true" ShowOnLoad="true" Width="500" Height="300">
 <Body>
  <table>
   <tr>
    <td>
     <ext:ComboBox 
                ID="cmbSearch"
                runat="server" 
                StoreID="stoUser"
                DisplayField="employee_name" 
                ValueField="employee_name"
                TypeAhead="false"
                LoadingText="Searching..." 
                Width="170"              
                HideTrigger="true" ForceSelection="false"
                ItemSelector="div.search-item"        
                MinChars="2" AutoShow="True" EmptyText="type atleast 2 characters to search">
                <Template ID="Template1" runat="server">
                   <tpl for=".">
                      <div class="search-item">
                         <h1>{employee_name}</h1>
                       
                      </div>
                   </tpl>
                </Template>
                <AjaxEvents>
                 <SpecialKey Type="Submit" Before="return e.getKey() == Ext.EventObject.ENTER;" OnEvent="btnCombo_Click" />
                </AjaxEvents>
            </ext:ComboBox>  
    </td>
    <td>
     <ext:Button ID="btnClick" runat="server" Text="Click">
             <AjaxEvents>
             <Click OnEvent="btnCombo_Click" />
             </AjaxEvents>
            </ext:Button>
    </td>
   </tr>
   </table>
            <ext:GridPanel ID="grdCombo" Width="350" Height="200" runat="server" StoreID="stoUser"   >
             <ColumnModel>
              <Columns>
               <ext:Column DataIndex="employee_name" Header="Name" />
               <ext:Column DataIndex="employee_no" Header="ID" />
              </Columns>
             </ColumnModel>
            
            </ext:GridPanel>        
  
  
 
 </Body>
</ext:Window>

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


protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                SqlConnection con = new SqlConnection("Data Source=WIN-48VFQRANCAF\\SQLEXPRESS;Initial Catalog=sample;User ID=sa;Password=sa@123");
                con.Open();
                SqlCommand cmd = new SqlCommand();
                cmd.CommandText = "Select employee_name from employee";
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                cmd.ExecuteNonQuery();
                DataSet ds = new DataSet();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(ds, "EMPLOYEE");
                con.Close();


                for (int index = 0; index < ds.Tables["EMPLOYEE"].Rows.Count; index++)
                {
                    Coolite.Ext.Web.ListItem li = new Coolite.Ext.Web.ListItem();
                    li.Text = Convert.ToString(ds.Tables["EMPLOYEE"].Rows[index].ItemArray[0]);
                    li.Value = Convert.ToString(ds.Tables["EMPLOYEE"].Rows[index].ItemArray[0]);
                    cmbSearch.Items.Add(li);
                }
            }
            catch
            {
                throw new Exception("Connection Error!");

            }
        }

        protected void btnCombo_Click(object sender, AjaxEventArgs e)
        {
            string id = Convert.ToString(cmbSearch.SelectedItem.Text);
            SqlConnection con = new SqlConnection("Data Source=WIN-48VFQRANCAF\\SQLEXPRESS;Initial Catalog=sample;User ID=sa;Password=sa@123");
            con.Open();
            //int ID = Convert.ToInt32(cmbSearch.SelectedItem.Value);
            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = "SELECT * FROM EMPLOYEE WHERE employee_name="+id;
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            cmd.ExecuteNonQuery();
            DataSet ds = new DataSet();
            SqlDataAdapter daa = new SqlDataAdapter(cmd);
            daa.Fill(ds, "EMPLOYEE");
            con.Close();
            stoUser.DataSource = ds;
            stoUser.DataBind();

        }

**Vladimir** · Nov 07, 2010, 5:23 PM

Hi,

If you don't use remote data retrieving (no any proxy in the Store) then combo can you automatically filter the records

Set Mode="Local" and TypeAhead="true" for the combo

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

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .search-item
        {
            font: normal 11px tahoma, arial, helvetica, sans-serif;
            padding: 3px 10px 3px 10px;
            border: 1px solid #fff;
            border-bottom: 1px solid #eeeeee;
            white-space: normal;
            color: #555;
        }
        .search-item h3
        {
            display: block;
            font: inherit;
            font-weight: bold;
            color: #222;
        }
        .search-item h3 span
        {
            float: right;
            font-weight: normal;
            margin: 0 0 5px 5px;
            width: 100px;
            display: block;
            clear: none;
        }
        p
        {
            width: 650px;
        }
        .ext-ie .x-form-text
        {
            position: static !important;
        }
    </style>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            var data = new System.Collections.Generic.List<object> 
            {
                new {employee_name = "Bill", employee_no = 1},
                new {employee_name = "Bob", employee_no = 2},
                new {employee_name = "Barry", employee_no = 3},
                new {employee_name = "Dan", employee_no = 4},
                new {employee_name = "Daryl", employee_no = 5},
                new {employee_name = "Gary", employee_no = 6},
            };

            stoUser.DataSource = data;
            stoUser.DataBind();
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    </ext:ScriptManager>
    <ext:Store ID="stoUser" runat="server">
        <Reader>
            <ext:JsonReader>
                <Fields>
                    <ext:RecordField Name="employee_name" />
                    <ext:RecordField Name="employee_no" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Window ID="wind" runat="server" CenterOnLoad="true" ShowOnLoad="true" Width="500"
        Height="300">
        <Body>
            <ext:ComboBox ID="cmbSearch" runat="server" StoreID="stoUser" DisplayField="employee_name"
                ValueField="employee_name" TypeAhead="true" LoadingText="Searching..." Width="170"
                HideTrigger="true" ForceSelection="false" ItemSelector="div.search-item" MinChars="2"
                EmptyText="type atleast 2 characters to search" Mode="Local">
                <Template ID="Template1" runat="server">
                   <tpl for=".">
                      <div class="search-item">
                         <h1>{employee_name}</h1>                        
                      </div>
                   </tpl>
                </Template>                
            </ext:ComboBox>
        </Body>
    </ext:Window>
    </form>
</body>
</html>

**Vasudhaika** · Nov 08, 2010, 3:34 AM

Originally Posted by Vladimir

Hi,

If you don't use remote data retrieving (no any proxy in the Store) then combo can you automatically filter the records

Set Mode="Local" and TypeAhead="true" for the combo

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

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .search-item
        {
            font: normal 11px tahoma, arial, helvetica, sans-serif;
            padding: 3px 10px 3px 10px;
            border: 1px solid #fff;
            border-bottom: 1px solid #eeeeee;
            white-space: normal;
            color: #555;
        }
        .search-item h3
        {
            display: block;
            font: inherit;
            font-weight: bold;
            color: #222;
        }
        .search-item h3 span
        {
            float: right;
            font-weight: normal;
            margin: 0 0 5px 5px;
            width: 100px;
            display: block;
            clear: none;
        }
        p
        {
            width: 650px;
        }
        .ext-ie .x-form-text
        {
            position: static !important;
        }
    </style>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            var data = new System.Collections.Generic.List<object> 
            {
                new {employee_name = "Bill", employee_no = 1},
                new {employee_name = "Bob", employee_no = 2},
                new {employee_name = "Barry", employee_no = 3},
                new {employee_name = "Dan", employee_no = 4},
                new {employee_name = "Daryl", employee_no = 5},
                new {employee_name = "Gary", employee_no = 6},
            };

            stoUser.DataSource = data;
            stoUser.DataBind();
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server">
    </ext:ScriptManager>
    <ext:Store ID="stoUser" runat="server">
        <Reader>
            <ext:JsonReader>
                <Fields>
                    <ext:RecordField Name="employee_name" />
                    <ext:RecordField Name="employee_no" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Window ID="wind" runat="server" CenterOnLoad="true" ShowOnLoad="true" Width="500"
        Height="300">
        <Body>
            <ext:ComboBox ID="cmbSearch" runat="server" StoreID="stoUser" DisplayField="employee_name"
                ValueField="employee_name" TypeAhead="true" LoadingText="Searching..." Width="170"
                HideTrigger="true" ForceSelection="false" ItemSelector="div.search-item" MinChars="2"
                EmptyText="type atleast 2 characters to search" Mode="Local">
                <Template ID="Template1" runat="server">
                   <tpl for=".">
                      <div class="search-item">
                         <h1>{employee_name}</h1>                        
                      </div>
                   </tpl>
                </Template>                
            </ext:ComboBox>
        </Body>
    </ext:Window>
    </form>
</body>
</html>

ya i have used your code..if press down arrow from key board it is displaying all records...i dont want like this, when i type characters in combo that time only data should be loaded to combo.. so that it will reduce the burden of loading data into the combo

**Daniil** · Nov 08, 2010, 7:03 AM

Hi,

Please add the following listener for the ScriptManager:

Example

<ext:ScriptManager runat="server">
    <Listeners>
        <DocumentReady Handler="cmbSearch.keyNav.down = Ext.emptyFn"/>
    </Listeners>
</ext:ScriptManager>

Thread: [CLOSED] Search

Thread Tools

Search Thread

Display

[CLOSED] Search

Similar Threads

[CLOSED] [1.0] Custom search help

[CLOSED] Sub Search for combobox

[CLOSED] search button

[CLOSED] [1.0] custom search

[CLOSED] custom search v1.0 IE6

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Search

[CLOSED] Search

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us