Searching through AJax using Textbox in asp.net, C#

Question

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 23-Apr-12 23:46pm

Sandhya Lovely

Updated 15-Jun-23 20:29pm

Add a Solution

3 solutions

Add a Solution

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

kingsa · Answer 1 · 2012-04-24T00:33:00

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;
}

pradiprenushe · Answer 2 · 2012-04-23T23:56:00

Solution 1

Refer this link
http://www.asp.net/ajaxlibrary/act_AutoComplete_Simple.ashx

You must have create WebService for this.

Posted 23-Apr-12 23:56pm

pradiprenushe

Comments

Nasenbaaer 3-May-16 4:55am

Just use payed 3rd party is no solution

Nikfazan · Answer 3 · 2012-04-24T13:09:00

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;            }
        }
    }
}

Searching through AJax using Textbox in asp.net, C#

3 solutions

Solution 2

Solution 1

Solution 4

Add your solution here

Preview 0

Searching through AJax using Textbox in asp.net, C#

3 solutions

Solution 2

Solution 1

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us