ajaxToolkit AutoCompleteExtender click 选择某项之后触发事件

What I wanted to do is using the autocomplete, search a receiver table, once a user selected a particular item in the autocomplete, the ReceiverID of the particular item is then somehow passed through to the code behind, and this ReceiverID is then used to display the receiver details in a panel below the autocomplete.

This was tricking as it involved both client side Javascript functions and code behind, but this was how I ended up doing it. First setup a normal ajax toolkit autocomplete, there is plenty of documentation out in the web world for this so I won’t go through in detail. In the webservice function where the data is retieved from the database, and added to a string array, the following will need to be used

Dim dr As System.Data.SqlClient.SqlDataReader
dr = dsReceverMgt.selectAllReceiverMnagement(prefixText)

While dr.Read
sQuickName = dr(”ReceiverQuickName”)
sCompany = dr(”ReceiverCompany”)
sLocationName = dr(”ReceiverAddressTown”)
Co = sQuickName & “,” & sCompany & “,” & dr(”ReceiverAddress1″) & “,” & sLocationName
If sQuickName.StartsWith(prefixText, StringComparison.OrdinalIgnoreCase) Or sCompany.StartsWith(prefixText, StringComparison.OrdinalIgnoreCase) Or sLocationName.StartsWith(prefixText, StringComparison.OrdinalIgnoreCase) Then
‘—add the member name to the list if the text starts with the variables—
listOfMembersStartsWith.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(Co, dr(”ReceiverPK”)))
Else
‘—add the member name to the list if the text contains the keyword but not as an prefix—
listOfMembersNotStartsWith.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(Co, dr(”ReceiverPK”)))
End If
End While

using this function AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem, the items is inserted with a value/text combination.

In the autocomplete declaration it self on the aspx code, this attribute need to be placed on the autocomplete OnClientItemSelected=”SetSelectedValue” , what this will trigger is on an selection in autocomplete, it will call a javascript function called SetSelectedValue, and here is the javascript declaration

function SetSelectedValue( source, eventArgs ) {
      document.getElementById((’ctl00_leftContent_SelectedReceiver’)).value=eventArgs.get_value();
}

or, fire a button’s click event:

function SetSelectedValue( source, eventArgs ) {
       var btnSearch=document.getElementById("ctl00_ContentPlaceHolder1_btnSearch");
       if (btnSearch)
       {btnSearch.click(); }     
}

What I have created on the page is a hidden input, so on fireing of the event by the autocomplete when an item is selected, it will set the hidden inputs value with the eventArgs.get_value(), which in my case is the primary key for the Receiver row

<input type=”hidden” id=”SelectedReceiver” runat=”server” />

once this is done, the selected pk is available.

The receiver details is displayed once a person clicks on a Go button, so in my Go button’s onclick event function, I have the following code, which then goes and retrievs the receiver details

Protected Sub btnGoReceiver_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGoReceiver.Click
      DisplayReceiverDetails(SelectedReceiver.Value)
End Sub

This can be easily modfied to retrieve the details on an autocomplete selection by adding a line to the SetSelectedValue function, which clicks the go button via javascript to trigger the action

 

http://www.cnblogs.com/day/archive/2008/06/16/1223295.html