Forcing TargetControl Textbox to use a value in the AutocompleteExtender

Question

I'm sure I'm going to have to write supporting javascript code to do this. I have an autocomplete extender set up that selects values from a database table, when a selection is made, i would like it to set the ID of the value selected to a hidden control. I can do that by handling a value change on the text box and making a select call to the database, Select idCompany from Companies Where CompanyName = "the text box value";

The most important thing is to constrain the values of the text box that is the targetcontrol for the autocomplete extender to ONLY use values from the autocomplete drop down. Is this possible with that control, is there examples somewhere? is there a better control to use (within the ajax control toolkit or standard .net framework - not a third party control)?

I'm going to be trying to work out some javascript, but I'll be checking back to this question to see if anyone has some useful links. I've been googling this last night for quite a while.

Update: I did not get an answer or any useful links, I've posted an almost acceptable user control that does what I want, with a few workable issues.

Answer 1

No one was able to give me an answer. This has been an ongoing saga. It started when I was trying to find a solution not using drop down lists for large amounts of data. I have run into issues with this so many times in previous projects. This seems to be workable code. Now I need to know how to supply a AutoPostBack Property, and allow for some events, such as SelectedValueChanged. And due to the javascript, it will conflict with another control, if I have more than one of them on the same page. Well, that's some of the known issues I'm looking at with the code, but it's a start and definately better than looking at a hung browser for 3 or 4 minutes while the drop down is loading 30k list items.

This code is assuming there is an asmx file with the script methods GetCompanyListBySearchString and GetCompanyIDByCompanyName.

ASPX FILE

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SelectCompany.ascx.cs" Inherits="Controls_SelectCompany" %>
<%@ Register TagPrefix="ajaxToolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<script language="javascript" type="text/javascript">
    var txtCompanyIDHiddenField = '<%= fldCompanyID.ClientID %>';
    var txtCompanyIDTextBox = '<%= txtCompany.ClientID %>';
    function getCompanyID() {
        if (document.getElementById(txtCompanyIDTextBox).value != "")
            CompanyService.GetCompanyIDByCompanyName(document.getElementById(txtCompanyIDTextBox).value, onCompanyIDSuccess, onCompanyIDFail);
    }
    function onCompanyIDSuccess(sender, e) {
       if (sender == -1)
           document.getElementById(txtCompanyIDTextBox).value = "";
       document.getElementById(txtCompanyIDHiddenField).value = sender;
    }
    function onCompanyIDFail(sender, e) {
        document.getElementById(txtCompanyIDTextBox).value = "";
        document.getElementById(txtCompanyIDHiddenField).value = "-1";
    }
    function onCompanySelected() {
        document.getElementById(txtCompanyIDTextBox).blur();
    }
</script>
<asp:TextBox ID="txtCompany" runat="server"  onblur='getCompanyID()' 
/><ajaxToolkit:AutoCompleteExtender runat="server" ID="aceCompany" CompletionInterval="1000" CompletionSetCount="10"
 MinimumPrefixLength="2"  ServicePath="~/Company/CompanyService.asmx" ServiceMethod="GetCompanyListBySearchString"
 OnClientItemSelected="onCompanySelected" TargetControlID="txtCompany" />
 <asp:HiddenField ID="fldCompanyID" runat="server" Value="0" />

CODE BEHIND

[System.ComponentModel.DefaultProperty("Text")]
[ValidationProperty("Text")] 
public partial class ApplicationControls_SelectCompany : System.Web.UI.UserControl

{
public string Text
{
    get { return txtCompany.Text; }
    set
    {
        txtCompany.Text = value;
        //this should probably be read only and set the value based off of ID to 
        // make certain this is a valid Company
    }
}
public int CompanyID
{
    get
    {
        int ret = -1; Int32.TryParse(fldCompanyID.Value, out ret); return ret;
    }
    set
    {
        fldCompanyID.Value = value.ToString();
        //Todo:  should set code to set the Text based on the ID to keep things straight
    }
}
}

Answer 2

Hi there,

Thanks for your post here. It is useful, however, it is assuming that everyone knows the setup to get the webservice called by a javascript function.

Sorry to be soo newbie, but I couldn't get the webservice called from client-side. I read this documentation: http://msdn.microsoft.com/en-us/magazine/cc163499.aspx

Furthermore, I found an interesting post that explains how to create/get a name value pair which is pretty much what you are expecting as far as I understood:

http://blogs.msdn.com/phaniraj/archive/2007/06/19/how-to-use-a-key-value-pair-in-your-autocompleteextender.aspx

Sorry if I misunderstood you, but I am just trying to guide other people that pass through the same situation.

Thanks a lot.

Answer 3

You can check the value of the selection by trapping on ClientItemSelected event and ensure that it is not blank.