¿Cómo puedo implementar la sugerencia automática de cuadro de texto usando jquery en mi aplicación c # asp.net?

I want to implement jquery textbox auto suggest in my c# asp.net application for the purpose of searching employees.Now i am using ajax auto suggest in my application but it's seems to be slow when data more than 50000 thousand.Somebody please help me.If any great idea about faster serching with huge data without using indexing please share with me.

preguntado el 29 de julio de 12 a las 03:07

3 Respuestas

jQuery Auto search details given bellow : Put down this code in your .aspx file. Here txtSearchBox is search box name.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
<title>AutoComplete Box with jQuery</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
<script type="text/javascript">
    $(document).ready(function() {
        SearchText();
    });
    function SearchText() {
        $("#txtSearch").autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Default.aspx/GetAutoCompleteData",
                    data: "{'username':'" + document.getElementById('txtSearch').value + "'}",
                    dataType: "json",
                    success: function(data) {
                        response(data.d);
                    },
                    error: function(result) {
                        alert("Error");
                    }
                });
            }
        });
    }
</script>
   </head>
   <body>
   <form id="form1" runat="server">
   <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel>
        <ContentTemplate>
            <div class="demo">
        <div class="ui-widget">
            <label for="tbAuto">Enter UserName: </label>
            <asp:TextBox ID="txtSearch" runat="server" AutoCompleteType="Search"> </asp:TextBox>
        </div>
</div>
        </ContentTemplate>
    </asp:UpdatePanel>

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

Now .cs file details:

public partial class _Default : Page 
{
  protected void Page_Load(object sender, EventArgs e)
   {

   }
[WebMethod]

public static List<string> GetAutoCompleteData(string username)
{
 List<string> result = new List<string>();

 using (SqlConnection con = new SqlConnection("Data Source=devserver;Initial     Catalog=Catalog;Persist Security Info=True;User ID=userName;Password=Password"))
{
 using (SqlCommand cmd = new SqlCommand("select (strEmployeeName + ',' + strEmployeeCode) as username from tblEmployee where strEmployeeName LIKE '%'+@SearchText+'%' ", con))
{
 con.Open();
 cmd.Parameters.AddWithValue("@SearchText", username);
 SqlDataReader dr = cmd.ExecuteReader();
 while (dr.Read())
{
 result.Add(dr["username"].ToString());
}
 return result;
}
}
}  
}

If you wish you can use object data source like:In this case your object method should return List type data.

[WebMethod]
public static List<string> GetAutoCompleteData(string strSearchKey)
{
    AutoSearch_BLL objAutoSearch_BLL = new AutoSearch_BLL();
    List<string> result = new List<string>();
    result = objAutoSearch_BLL.AutoSearchEmployeesData(strSearchKey);
    return result;
}

Respondido 29 Jul 12, 04:07

jQuery UI provides a good autocomplete implementation and the docs suggest it can be used to pull autocomplete suggestions from very large databases

You can pull data in from a local and/or a remote source: Local is good for small data sets (like an address book with 50 entries), remote is necessary for big data sets, like a database with hundreds or millions of entries to select from.

http://jqueryui.com/demos/autocomplete/

Tenga en cuenta que si es volver 50K suggestions to the browser (as opposed to pulling suggestions from a pool of 50K possibilities), you are doing something wrong (that's a lot of data to push across the wire).

Respondido 29 Jul 12, 03:07

Poner en marcha Autocompletar interfaz de usuario de jQuery would be simple as this

$(function(){
     $( "#txtEmployee" ).autocomplete({
        source: "employees.aspx",
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });
});

Autocompletar interfaz de usuario de jQuery apoya some client side caching of the data. That will definitely improve the speed of search. Also, you may consider implementing a capa de almacenamiento en caché in your application where you store the List of Employees so that the autocomplete will not query your database everytime. Instead it will fetch the data from the caching layer.

Respondido 29 Jul 12, 03:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.