Click here to Skip to main content
15,350,704 members
Please Sign up or sign in to vote.
3.00/5 (3 votes)
See more:
Sir , This is Sandhya,

Please can anyone send the code and design pages for searching the data using AJAX.

i need to search like google.

By the way, i need to search the data from gridview. when i type one letter it should show all the details of that. JUST LIKE GOOGLE Search. i need water mark also inside the textbox.

Please anyone send me the design and code page.

Thank u so much sirs,
Posted

XML
[WebMethod]

public static List<string> GetAutoCompleteData(string username)
{
List<string> result = new List<string>();
using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))
{
using (SqlCommand cmd = new SqlCommand("select DISTINCT UserName from UserInformation where UserName LIKE '%'+@SearchText+'%'", con))
{
con.Open();
cmd.Parameters.AddWithValue("@SearchText", username);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
result.Add(dr["UserName"].ToString());
}
return result;
}
   
Refer this link
http://www.asp.net/ajaxlibrary/act_AutoComplete_Simple.ashx

You must have create WebService for this.
   
Comments
Nasenbaaer 3-May-16 4:55am
   
Just use payed 3rd party is no solution
This solution uses WebService, Entity Framework , Jquery, JqueryUI

View Page
HTML
<html lang="en">
<head>
    <title>jQuery UI Autocomplete</title>
    
    <link rel="stylesheet" 
    href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")">

    <script src="@Url.Content("~/Scripts/jquery-1.5.2.min.js")" 
     type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")" 
     type="text/javascript"></script>
    

	<script
	    $(function () {
	        $("#txtSiteName").autocomplete({
	            source: function (request, response) {
	                $.ajax({
	                    type: "POST",
	                    contentType: "application/json; charset=utf-8",
	                    url: "/WebService1.asmx/GetAllSites",
	                    data: "{'keywords':'" + request.term + "'}",
	                    dataType: "json",
	                    async: true,
	                    success: function (data) {
	                        response(data.d);
	                    },
	                    error: function (result) {
	                        //alert("Error");
	                    }
	                });
	            }
	        });
	    });
	</script>
</head>
<body>
    <!-- When you type in textBox it will AutoComplete-->
    <input id="txtSiteName" type="text" /> 

</body>
</html>


WebService
C#
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Services;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    /// <summary>
    /// Summary description for WebService1
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script,
    // using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {
        private Model1Container context = new Model1Container();

        [WebMethod]
        public IList<string> GetAllSites(string keywords)
        {
            IList<string> result;

            result = context.Entity1
                        .Where(x => x.Sites.Contains(keywords))
                        .Select(y => y.Sites).ToArray();

            try
            {                return result;          }
            catch
            {                return null;            }
        }
    }
}
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900