GridAutoCompleteColumn - JQuery Autocomplete?

[Ben]

I used to have a page with a JQuery Autocomplete. It used 2 textboxes, one for the text search, and one for the returned value.

It was setup like this

//AutoComplete functions
        $(document).ready(function () {

            $(function () {
                initializer();
            });

            var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
            prmInstance.add_endRequest(function () {

                initializer();

            });

            jQuery(function ($) {

                $('#<%=txtPBId.ClientID%>').change(function (e) {
                    var val = $(this).val();
                    if (val == '')
                        $('#<%=hdnPBId.ClientID%>').val("");
                });

            });

            // Setup AutoComplete
            function initializer() {

                $('#<%=txtPBId.ClientID%>').autocomplete({
                    cacheLength: 1,
                    source: function (request, response) {
                        $.ajax({
                            url: "../WS/AutoComplete.aspx",
                            dataType: "json",
                            data: {
                                term: request.term,
                                ref: 1,
                                random: new Date().getTime()
                            },
                            success: function (data) {
                                response(data);
                                $('#<%=hdnPBId.ClientID%>').val("");
                            },
                            error: function (model, error) {
                                $('#<%=hdnPBId.ClientID%>').val("");
                                //alert("No code found.");
                            }

                        });
                    },
                    select: function (event, ui) {
                        $('#<%=hdnPBId.ClientID%>').val(ui.item.idval);
                    }
                });

            }

        });

 

I now want to use a RadGrid with InPlace Editing. Is there any way of tying a GridAutoCompleteColumn to the above?

I can't use Datasources/Tablenames etc.

[Ben]

Just to update .. 

Used a GridTemplateColumn, with a textbox in. Uses 'onfocus' to add the AutoComplete.

<asp:TextBox class="standardTextBox" ID="txtSM" runat="server" onfocus="OnFocus(this,event)"/>

Then in the ItemTemplate, I added a RadScriptBlock

<telerik:RadScriptBlock ID="RadScriptBlockServiceMaster" runat="server">
                                                            <script type="text/javascript">
                                                                function OnFocus(sender, args) {
                                                                    var txt = sender;
                                                                    $(txt).autocomplete({
                                                                            cacheLength: 1,
                                                                            source: function (request, response) {
                                                                                $.ajax({
                                                                                    url: "../WS/AutoComplete.aspx",
                                                                                    dataType: "json",
                                                                                    data: {
                                                                                        term: request.term,
                                                                                        ref: 1,
                                                                                        random: new Date().getTime()
                                                                                    },
                                                                                    success: function (data) {
                                                                                        response(data);
                                                                                        $('#<%=hdnValue.ClientID%>').val("");
                                                                                        $('#<%=hdnLabel.ClientID%>').val("");
                                                                                    },
                                                                                    error: function (model, error) {
                                                                                        $('#<%=hdnValue.ClientID%>').val("");
                                                                                        $('#<%=hdnLabel.ClientID%>').val("");
                                                                                        //alert("No code found.");
                                                                                    }

                                                                                });
                                                                            },
                                                                        select: function (event, ui) {
                                                                            $('#<%=hdnValue.ClientID%>').val(ui.item.idval);
                                                                            $('#<%=hdnLabel.ClientID%>').val(ui.item.label);
                                                                            $('#<%=btnChanged.ClientID%>').click();
                                                                        }
                                                                    });
                                                                }

                                                            </script>
                                                        </telerik:RadScriptBlock>

Then tucked away outside the Grid, objects to store the Value / Description, and call the ServerSide

<asp:HiddenField ID="hdnLabel" runat="server" />
<asp:HiddenField ID="hdnValue" runat="server" />
<asp:Button ID="btnChanged" CssClass="wilsarButton" runat="server" Text="Hidden Action Refresh" CausesValidation="false" style="display: none;" />

Server side I then put the values where I need them.