Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I would like to implement muliple auto-complete search textbox or combobox in a single web form just like in my screen shot.
Can any one help me to implement this by using web service or without web or Asp.net Ajax toolkit service.
Posted

Sure - this is totally easy.


All an autocomplete textbox is, is a textbox associated with a datalist:


HTML
<input type="text" list="mydatalist" />
<datalist id="mydatalist">
  <option>abcd</option>
  <option>abce</option>
  <option>abcf</option>
  <option>abcg</option>
</datalist>


You can start with a blank datalist and use javascript to add items to it. Get these items from an ajax web service call.

If you need help with any of these specific points, search for them first. They are all very well resourced here and all over the googles.

Hope that helps ^_^

Andy
 
Share this answer
 
Please refer below links for sample .

http://www.aspdotnet-suresh.com/2012/08/using-jquery-autocomplete-with-aspnet.html[^]

http://www.encodedna.com/2013/04/autocomplete-textbox-using-jquery.htm
 
Share this answer
 
v2
Please Use webservice for this problem.
<asp:textbox id="txtlocation" runat="server" height="25px" cssclass="input-medium " style="display:none;" xmlns:asp="#unknown">
JavaScript
<script>
            $(document).ready(function () {             
                //Product_BusinessSearch();              
                Location();
            });
        </script></script>


Using this script for send your request.
JavaScript
function Location() {
    //var hdfcity_id=document.getElementById("#hdfCity");
    $("#txtlocation").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: 'WebService_SearchBox.asmx/GetLocation',
                data: "{ 'prefix': '" + request.term + "','CurrURL':'" + window.location.pathname + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[0],
                            val: item.split('-')[1]
                        }
                    }))
                },

                error: function (response) {
                    //alert(response.responseText);
                },
                failure: function (response) {
                    // alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#hdfCity").val(i.item.val);
            LocationCookies(i.item.val);
    },
    minLength: 1
    });
};


create a webservice and follow the code.

C#
[WebMethod]
   [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
   public bool GetLocAuto(Int32 country_id, Int32 state_id, Int32 city_id)
   {


       string strResult = ""; bool isset = false;
       strResult = country_id.ToString() + "#" + state_id.ToString() + "#" + city_id.ToString();
       try
       {

           HttpCookie City_ID = new HttpCookie("LocName", strResult);
           City_ID.Expires = DateTime.Now.AddHours(3);
           Context.Response.SetCookie(City_ID);
           isset = true;
       }
       catch (Exception)
       { }
       return isset;
   }
 
Share this answer
 

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