一个页面多次使用自动补全用户控件，赋值取值出错！

骑在墙头的草

小弟是初学者，在做自动补全用户控件的时候遇到了一个难题，希望各位大哥给点帮助！
用户控件：<ext:TextBox runat="server" ID="_UserName" CssClass="username"></ext:TextBox>
<ext:TextBox ID="hf_UserID" runat="server"  CssClass="userid"></ext:TextBox>

<script type="text/javascript">
    function onUserLoad() {

       var userid = '<%=hf_UserID.ClientID %>'
        var username = '<%=_UserName.ClientID %>'
        function split(val) {
            return val.split(/,\s*/);
        }

        // 取得以逗号空格为分隔符的最后一个单词
        function extractLast(term) {
            return split(term).pop();
        }
        $('.username').bind("keydown", function (event) {
            // 通过 Tab 选择一项时，不会使当前文本框失去焦点
            if (event.keyCode === $.ui.keyCode.TAB &&
                        $(this).data("autocomplete").menu.active) {
                event.preventDefault();
            }
        }).autocomplete({
            minLength: 0,
            source: function (request, response) {
                $.getJSON("<%=Compsite.Url_Ajax_UserSelect %>", {
                    term: extractLast(request.term)
                }, response);
            },
            search: function () {
                // 自定义的minLength（如果要限制两个字符才提示，把下面的1改为2即可）
                var term = extractLast(this.value);
                if (term.length < 1) {
                    return false;
                }
            },
            focus: function () {
                // 阻止某一项获得焦点时，更新文本框的值
                return false;
            },
            select: function (event, ui) {
                var svaule = ui.item.value;
                var terms = new Array();
                terms = svaule.split(",");
                this.value = terms[0];
                $('#<%=hf_UserID.ClientID %>').val(terms[1]);
                return false;
            }
        });

           
    }
</script>
前台引用页面是这样的：   <ext:FormRow ColumnWidths="33% 33% 34%">
                                                <Items>
                                                   <ext:SimpleForm ID="SimpleForm4" ShowBorder="false" ShowHeader="false" runat="server"
                                                        EnableBackgroundColor="true" LabelWidth="70px">
                                                        <Items>
                                                            <ext:UserControlConnector ID="UserControlConnector2" runat="server" >
                                                                <ucUser:ucUserControl ID="ucYeWuYuan" runat="server" LabelName="业务员"   />
                                                            </ext:UserControlConnector>
                                                        </Items>
                                                    </ext:SimpleForm>

                                                <ext:SimpleForm ID="SimpleForm5" ShowBorder="false" ShowHeader="false" runat="server"
                                                        EnableBackgroundColor="true">
                                                        <Items>
                                                            <ext:UserControlConnector ID="UserControlConnector3" runat="server" >
                                                                <ucUser:ucUserControl ID="ucCaoZuoRen" runat="server" LabelName="操作员"   />
                                                            </ext:UserControlConnector>
                                                        </Items>
                                                    </ext:SimpleForm>
                                                                                                 </Items>
                                            </ext:FormRow>
    <script language="javascript" type="text/javascript">
        function onReady() {
            onUserLoad();
        }
    </script>
问题就是： 我想在一个页面上多次使用这个用户控件，结果就是不管怎么操作都是只能给其中一个控件的hf_UserID赋值。

RobinLau

同问、求解。。。各位大大有类似的解决方案么？