Javascript code to get ProductID?

Question

I have a webservice that gets a ProductName and I need the Products that are dropped down from the AutoExtender to be links to each product's individual page. Right now the URL gets filled with the ProductName, and not the ID:

Default.aspx?id=Test%20Product

needs to be

Default.aspx?id=519

*Note - this site is for internal use only, so we are not worried about getting hacked right now. We want the site to work.

I have been told that what I want to do is not possible by people on the forum for asp.net so I came here hoping for some help. I think it is the javascript that is getting the ProductName from the webservice, and I need it to get the ProductID. I tried rewriting the For Each loop to include ProductID instead of ProductName, but then the AutoCompleteExtender only shows IDs in the results instead of the ProductNames.

Javascript:

<script type="text/javascript">
function AutoCompleteClientMethod(source, eventArgs) {
    var value = eventArgs.get_value();
    window.location = ("/Product/Default.aspx?id=" + value)
} 
</script>

Here is the code for my autoCompleteExtender and the webservice:

<asp:TextBox ID="Search" runat="server" AutoComplete="off"></asp:TextBox>
    <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="Search" ServicePath="~/ProductSearch.asmx" ServiceMethod="GetProducts" MinimumPrefixLength="1" CompletionSetCount="120" EnableCaching="true" OnClientItemSelected="AutoCompleteClientMethod">
    </asp:AutoCompleteExtender>

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class ProductSearch
Inherits System.Web.Services.WebService


<WebMethod()> _
Public Function GetProducts(ByVal prefixText As String, ByVal count As Integer) As String()
    Dim ProductSql As String = "Select DISTINCT ProductID, ProductName FROM Product WHERE ProductName LIKE '%" & prefixText & "%' ORDER BY ProductName ASC"
    Dim sqlConn As New SqlConnection
    sqlConn.Open()
    Dim myCommand As New SqlCommand(ProductSql, sqlConn)
    Dim myReader As SqlDataReader = myCommand.ExecuteReader()
    Dim myTable As New DataTable
    myTable.TableName = "ProductSearch"
    myTable.Load(myReader)
    sqlConn.Close()
    Dim items As String() = New String(myTable.Rows.Count - 1) {}
    Dim i As Integer = 0
    For Each dr As DataRow In myTable.Rows
        items.SetValue(dr("ProductName").ToString(), i)
        i += 1
    Next
    Return items
End Function
End Class

Edit: Adding the way the search results used to show up before the switch to the AutoCompleteExtender. I have tried to incorporate this into what I have now, but I can't get anything to work right. Please note that this is the OLD code, what is above is all the code I am using NOW.

<div class="hiddenResults">
    <ul id="hiddenResults" style="display:none;">
    <asp:ListView ID="lvProducts" runat="server" DataSourceID="dsProducts">
    <ItemTemplate>
        <li><a href="/Product/Default.aspx?id=<%# eval("ProductID") %>"><span class="title"><%# eval("ProductName") %></a></span></li>
    </ItemTemplate>
    </asp:ListView>
    </ul>
</div>

I tried

 <ul style="list-style:none;"><li><a href='/Product/Default.aspx?id=<%# eval("ProductID") %>'>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="Search" ServicePath="~/ProductSearch.asmx" ServiceMethod="GetProducts" MinimumPrefixLength="1" CompletionSetCount="120" EnableCaching="true" OnClientItemSelected="AutoCompleteClientMethod">
</asp:AutoCompleteExtender></a></li></ul>

but having the autocomplete extender in a list keeps the results of the query from showing.

Edit: Working code:

    For Each dr As DataRow In myTable.Rows
        Dim id As String = dr("ProductID").ToString()
        Dim name As String = dr("ProductName").ToString()
        Dim item As String = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(name, id)
        items.SetValue(item, i)
        i += 1
    Next

Answer 1

See this article, or this one.

In short, create your list items using CreateAutoCompleteItem(). Modify the loop in GetProducts to use CreateAutoCompleteItem():

For Each dr As DataRow In myTable.Rows
    dim id as String = dr("ProductId").ToString()
    dim name as String = dr("ProductName").ToString()
    dim item as String = AutoCompleteExtender.CreateAutoCompleteItem(name, id)
    items.SetValue(item, i)
    i += 1
Next

That sends both the name and the id to the client. That step is crucial. (If there are syntax errors above, forgive me... It's been a long time since I coded much VB - mostly C# these days.)

Then modify your OnClientItemSelected handler to use get_key() instead of get_value() for the url:

function AutoCompleteClientMethod(source, eventArgs) {
    var value = eventArgs.get_key();
    window.location = ("/Product/Default.aspx?id=" + value)
}