Buy Questpond's video subscriptions on huge discount.
DotNetFunda.com
Online: 1169
Home > Forums > C# >

Jquery Like AutoCompleteExtender In C# [Resolved]

Posted by Sharpcnet under C# on 11/27/2013 | Points: 10 | Views : 3097 | Status : [Member] | Replies : 4
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
I am trying to make my Ajax AutoCompleteExtender look like this - http://jquery-sew.s3-website-us-east-1.amazonaws.com/ . The suggestion list would show the code and its name in brackets. eg: C01 (Sweden).

This code works fine. 

public string[] GetCodes(string prefixText)
    {
      return MyDB.tblCountries.Where(c=>c.CountryCode.
             StartsWith(prefixText)).OrderBy(c=>c.CountryCode)
             .Select(c=> c.CountryCode + "(" + c.CountryName + ")").ToArray();    
    }

1. When an Item is selected from the list say 'C01 (Sweden)', I would like to show only C01 in the textbox.

2. Is it possible to reduce the font size of the text in brackets (Just as shown in the link).



Reply | Reply with Attachment
Alert Moderator 

Responses

Posted by: Allemahesh on: 11/27/2013 [Member] [MVP] Silver | Points: 50

Up
0
Down

Resolved
I got you problem. You can do this by using a java-script function.

You need to call the one java-script function with "onchange" event and do the change on that function. I have checked the code and it is working fine.

See the below code:-

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">

        function myFunction() {
            var value = document.getElementById('<%= txtSearch.ClientID %>').value;
            var Index = value.indexOf("(");
            var finalValue = value.substring(0, Index);
            if (finalValue != "") {
                document.getElementById('txtSearch').value = finalValue;
            }
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ajax:ToolkitScriptManager ID="ScriptManager1" runat="server" />
    <div>
        <asp:TextBox ID="txtSearch" runat="server" onchange="myFunction();"></asp:TextBox>
        <ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtSearch"
            MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000"
            ServiceMethod="GetData">
        </ajax:AutoCompleteExtender>
    </div>
    </form>
</body>
</html>


Let me know if you have other issue.

Happy Coding,
If it helps you or directs U towards the solution, MARK IT AS ANSWER

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Allemahesh on: 11/27/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
Also here is another solution by using C# code:-

Here you need to call ontextchanged() server side event of TextBox and do the changes on it.

I suggest strong to use the above JavaScript code and it will very easy and fast. 

protected void txtSearch_TextChanged(object sender, EventArgs e)
{
    if (txtSearch.Text.Length > 0)
        txtSearch.Text = Convert.ToString(txtSearch.Text).Substring(0, txtSearch.Text.IndexOf('(')).Trim();
}


<div>
    <asp:TextBox ID="txtSearch" runat="server" 
        ontextchanged="txtSearch_TextChanged" AutoPostBack="true"></asp:TextBox>
    <ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtSearch"
        MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000"
        ServiceMethod="GetData">
    </ajax:AutoCompleteExtender>
</div>


Let me know if you have other issue.

Happy Coding,
If it helps you or directs U towards the solution, 
MARK IT AS ANSWER


Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Sharpcnet on: 11/27/2013 [Member] Starter | Points: 25

Up
0
Down
Hi. Thank you.
1. In your JS soln., one line says document.getElementById('<%= txtSearch.ClientID %>').value
but the later line says document.getElementById('txtSearch').value. What is the difference.

2. The condition was if (finalValue != "")...What is the need for this condition here.

3. Could you plz also advice about my 2nd question. I would like to apply style only to the bracketed text, just like in the JQuery one.

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Allemahesh on: 11/27/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
Question 1:

The ID generated in the final HTML is not guaranteed to remain the same as the one in your aspx source. When you'll put the controls inside naming containers the ID will have prepended one or several parent ids to ensure its uniqueness. The ClientId property will always give you the final form of the ID attribute as it ends up in the HTML so it's always recommended to use that in your javascript.

Just replace document.getElementById('txtSearch').value with document.getElementById('<%= txtSearch.ClientID %>').value.


Question 2:
if (finalValue != "") means that when "myFunction" fiction will be called twice, then it will check if the finalValue has any values or not.

Question 3:

For the formatting, I dot have any idea. But you need to do this form you server side method. I.e public string[] GetCodes(string prefixText).

See the complete code:-


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">

        function myFunction() {
            var value = document.getElementById('<%= txtSearch.ClientID %>').value;
            var Index = value.indexOf("(");
            var finalValue = value.substring(0, Index);
            if (finalValue != "") {
                document.getElementById('<%= txtSearch.ClientID %>').value = finalValue;
            }
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ajax:ToolkitScriptManager ID="ScriptManager1" runat="server" />
    <div>
        <asp:TextBox ID="txtSearch" runat="server" onchange="myFunction();"></asp:TextBox>
        <ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtSearch"
            MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000"
            ServiceMethod="GetData">
        </ajax:AutoCompleteExtender>
    </div>
    </form>
</body>
</html>


Happy Coding,
If it helps you or directs U towards the solution, 
MARK IT AS ANSWER


Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response

Latest Posts