Click here to Skip to main content
15,881,812 members
Please Sign up or sign in to vote.
1.67/5 (4 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
Updated 15-Jun-23 20:29pm

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;
}
 
Share this answer
 
Refer this link
http://www.asp.net/ajaxlibrary/act_AutoComplete_Simple.ashx

You must have create WebService for this.
 
Share this answer
 
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;            }
        }
    }
}
 
Share this answer
 
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