Click here to Skip to main content
15,888,610 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

I have two Text boxes, namely State and City. State text box and City box are having ajax auto complete property. Now my task is based on the State Text box, the city text box should display the list. How is to do?

Thanks in Advance.
Posted

Using Textbox TextChanged Event pass the State selected to the sql query which retrieves data to the CIty TextBox.

For this u should set the PostBack Property of State TextBox to TRUE.



Another suggestion is: It is better to use dropdown lists instead of textboxes to overcome the complexity if using Ajax Auto Complete textbox is not your client requirement
 
Share this answer
 
XML
function ace_allSearchCity() {
            var nam = '';
            var para = 'maincity' + '$' +
            document.getElementById('<%=hdnPropState.ClientID%>').value + '$' +
            document.getElementById('<%=txtPropCity.ClientID%>').value + '$' + nam;
            $find('<%=AutoCompleteExtenderPropCity.ClientID%>').set_contextKey(para);
        }


function ace_allSearchCityClear() {
            if (document.getElementById('<%=txtPropCity.ClientID%>').value == '') {
                document.getElementById('<%=hdnPropCity.ClientID%>').value = '';
            }
        }


function ace_PropCitySelected(sender, e) {
            document.getElementById('<%=hdnPropCity.ClientID%>').value = e._value;
        }


function ace_allSearchState() {
            var nam = '';
            var para = 'state' + '$' +
            document.getElementById('<%=txtPropState.ClientID%>').value + '$' +
            document.getElementById('<%=hdnPropCity.ClientID%>').value + '$' + nam;
            $find('<%=AutoCompletePropState.ClientID%>').set_contextKey(para);
        }

function ace_allSearchStateClear() {
            if (document.getElementById('<%=txtPropState.ClientID%>').value == '') {
                document.getElementById('<%=hdnPropState.ClientID%>').value = '';
            }
        }

function ace_PropStateSelected(sender, e) {
            document.getElementById('<%=hdnPropState.ClientID%>').value = e._value;
        }






XML
<div>
                                            <div>
                                                State:
                                       <div>
                                                <asp:TextBox ID="txtPropState" runat="server" onfocus="ace_allSearchState();" onblur="ace_allSearchStateClear();"></asp:TextBox>
                                                <asp:AutoCompleteExtender ID="AutoCompletePropState" TargetControlID="txtPropState"
                                                    CompletionListCssClass="Completion_1" ServiceMethod="GetSearchAutodata" DelimiterCharacters=";,:/" ServicePath="~/GlobalSearch.asmx" MinimumPrefixLength="0" CompletionInterval="100"
EnableCaching="False" runat="server" Enabled="True" UseContextKey="True" OnClientItemSelected="ace_PropStateSelected">
                                                </asp:AutoCompleteExtender>
                                                <asp:HiddenField ID="hdnPropState" runat="server" />
                                            </div>
                                        </div>


<div>
                                            <div>
                                                City:
                                       <div>
                                                <asp:TextBox ID="txtPropCity" runat="server" OnTextChanged="txtPropCity_TextChanged"
                                                    onfocus="ace_allSearchCity();" onblur="ace_allSearchCityClear();"></asp:TextBox>
                                                <asp:AutoCompleteExtender ID="AutoCompleteExtenderPropCity" TargetControlID="txtPropCity"
                                                    CompletionListCssClass="Completion_1" ServiceMethod="GetSearchAutodata" DelimiterCharacters=";,:/" ServicePath="~/GlobalSearch.asmx" MinimumPrefixLength="0" CompletionInterval="100"
                                                    EnableCaching="False" runat="server" Enabled="True" UseContextKey="True" OnClientItemSelected="ace_PropCitySelected">
                                                </asp:AutoCompleteExtender>
                                                <asp:HiddenField ID="hdnPropCity" runat="server" />
                                            </div>
                                        </div>





[WebMethod]
        public string[] GetSearchAutodata(string prefixText, int count, string contextKey)
        {                      
            DataTable dtAdvSearch;

            string[] data = new string[11];
            
            if (contextKey == "null" || contextKey == null)
            {
                dtAdvSearch = GetLocation(prefixText.Trim(), "state", "");

            }
            else
            {
                data = contextKey.Split('$');

                dtAdvSearch = GetLocation(prefixText.Trim(), data[0], data[1]);


            }

            List<string> regions = new List<string>();
            if (dtAdvSearch.Rows.Count == 0 || dtAdvSearch.Select("Description<>''").Length == 0)
            {
                string[] msg = new string[] { "No Records Found" };
                return msg;
            }
            else
            {
                for (int i = 0; i < dtAdvSearch.Rows.Count; i++)
                {

                    var nam = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(dtAdvSearch.Rows[i][1].ToString(), dtAdvSearch.Rows[i][0].ToString());
                    regions.Add(nam);
                }
                return regions.ToArray();
               }
        }
 
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