jQuery Autocomplete with multiple fileds in Asp.Net C#

最新推荐文章于 2022-02-25 20:06:27 发布

原创最新推荐文章于 2022-02-25 20:06:27 发布 · 357 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#autocomplete #jquery #asp.net #c# #xmlhttprequest #function

ASP.NET 同时被 2 个专栏收录

1 篇文章

订阅专栏

JQuery

1 篇文章

订阅专栏

本文介绍如何使用jQuery实现自动完成功能，特别适用于在特定城市或州的位置中列出商业名称的场景。通过结合使用ASP.NET C# 和 jQuery，可以有效提高用户体验。

This article explains jQuery autocomplete with multiple fields using Asp.Net C#.

Scenario : Listing business titles for a specific city/state location.

Initially I used AJAX CONTROL TOOLKIT (ACT) but I ran in to many issues and finally decided to use jQuery approach which really saved my time.

You can Download the complete source code from here

Add jQuery assets on your page.

   <link href="styles/jquery-ui.css" mce_href="styles/jquery-ui.css" rel="stylesheet" type="text/css"/>
<mce:script type="text/javascript" src="scripts/jquery.min.js" mce_src="scripts/jquery.min.js"></mce:script>
<mce:script type="text/javascript" src="scripts/jquery-ui.min.js" mce_src="scripts/jquery-ui.min.js"></mce:script>

jQuery Code for consuming web service.

 
   
<mce:script type="text/javascript"><!--
$(function () {
var search = $("#<%=txtSearch.ClientID%>");
var location = $("#<%=txtLocation.ClientID %>");
search.autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '<%=ResolveUrl("~/") %>AutoCompleteService.asmx/GetKeyWords',
            data: "{ 'keyword': '" + search.val() + "', 'location' : '" + location.val() + "'}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                if (data.d != null) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item
                        }
                    }))
                }
            },
            error: function (XMLHttpRequest, textStatus, error) {
                //alert(textStatus);
            }
        });
    },
    minLength: 1
});
location.autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '<%=ResolveUrl("~/") %>AutoCompleteService.asmx/GetLocations',
            data: "{ 'location': '" + location.val() + "'}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                if (data.d != null) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item
                        }
                    }))
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // alert(textStatus);
            }
        });
    },
    minLength: 1
});
});
// --></mce:script>
  
        

 
 
  

Code-behind for ASMX class (don’t forget to uncomment System.Web.Script.Services.ScriptService)

 
   
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Services;
using System.Collections;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoCompleteService : System.Web.Services.WebService {
public AutoCompleteService () {
}
IDictionary<string, string[]> LoadItems()
{
    IDictionary<string, string[]> items = new Dictionary<string, string[]>();
    items.Add("Newyork", new string[]
                                        {
                                            "Applebee's", "Apiary", "Brenda's French Soul Food","TGI Friday's","Cafe Venue"
                                        });
    items.Add("Los Angeles", new string[]
                                        {
                                            "Los 1", "Los 2", "Los 3","TGI Friday's","Cafe Venue"
                                        });
    items.Add("Las Vegas", new string[]
                                        {
                                            "Los 1", "Los 2", "Los 3","TGI Friday's","Cafe Venue"
                                        });
    return items;
}
[WebMethod]
public string[] GetKeyWords(string keyword, string location)
{
    var items = LoadItems();
    if (items != null && items.Count > 0)
    {
        //Get all items for a specific location
        var result = (from item in items
                        where item.Key.Equals(location, StringComparison.OrdinalIgnoreCase)
                        select item.Value)
                    .FirstOrDefault();
        //check whether the items start with the keyword
        return result.Where
                            (
                                o => o.StartsWith(keyword, StringComparison.OrdinalIgnoreCase)
                            ).ToArray<string>();
    }
    return null;
}
[WebMethod]
public string[] GetLocations(string location)
{
    var items = LoadItems();
    if (items != null && items.Count > 0)
    {
        //check whether the items start with the location
        return (from item in items
                        where item.Key.StartsWith(location, StringComparison.OrdinalIgnoreCase)
                        select item.Key).ToArray<string>();
    }
    return null;
}
}
  
        

 
 
  

You can Download the complete source code from here

Hope this help and If you have any comments, please feel free to write your feedback.

Thanks
Deepu