Question

我正在为我的一个下拉字段使用telerik自动完成框。当用户按下enter键时，telerik autocompletebox用于关闭下拉列表。我的目标是当用户按下输入时，将单击btnServicesSearch按钮。我已经尝试将现有面板包裹在整个表单周围并创建了efault按钮，但这仍然无法正常工作，因为“输入密钥”只会在telerik指示它时关闭下拉菜单。我创建了一个control.clientid，当用户按下enter时会触发，但是在控制台中我得到错误“无法读取null的click属性”。

<script>
    var handler = Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown;
    Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown = function (e) {

        handler.apply(this, [e]); // Let AutoCompleteBox finish it's internal logic

        if (e.keyCode == Sys.UI.Key.enter) {
            this._onBlur();

            //$get("btnServicesSearch").click();
            $get('<%#btnServicesSearch.ClientID%>').click();
            
        }
    }
</script>
<div class="row grid">
    <div class="col-md-12">
        <h2>I'm Searching For:</h2>
    </div>
	<div class="col-md-12">
		<div class="cs-form-service">
			<label class="control-label">Start typing the name of a service</label>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
				<telerik:RadAutoCompleteBox ID="racServices" runat="server" DropDownHeight="150" Skin="SJP" EnableEmbeddedSkins="false"
					IsCaseSensitive="false" InputType="Text" TextSettings-SelectionMode="Single" AllowCustomEntry="true" DropDownPosition="Static"
                    EmptyMessage="Enter first few letters" ClientIDMode="Static" EnableClientFiltering="true" CssClass="input-space" DropDownWidth="224" />
			</telerik:RadAjaxPanel>
		</div>
	</div>
</div>
<div class="row grid">
	<div class="col-md-8 col-sm-12 col-xs-12">
		<div class="col-md-6 col-sm-6 col-xs-6">
			<div class="input-within">
				<label class="control-label">Near</label>
                <asp:TextBox ID="txtZip" runat="server" CssClass="form-control input-sm" placeholder="ZIP Code" />
			</div>
		</div>
		
		<div class="col-md-6 col-sm-6 col-xs-6">
			<div class="input-within">
				<label class="control-label">Within</label>
					<asp:DropDownList ID="ddlRadius" runat="server" CssClass="form-control small-text">
                        <asp:ListItem Value="5" Text="Within 5 miles" />
                        <asp:ListItem Value="10" Text="Within 10 miles" />
                        <asp:ListItem Value="15" Text="Within 15 miles" />
                        <asp:ListItem Value="20" Text="Within 20 miles" />
						<asp:ListItem Value="25" Text="Within 25 miles" />
                    </asp:DropDownList>
			</div>
		</div>
	</div>
              
	<div class="col-md-4 col-sm-12 col-xs-12">
		<asp:Button ID="btnServicesSearch" runat="server" Text="Search" OnClick="btnSearch_Click" CssClass="btn btn-primary btn-md btn-full btn-service-search" />
	</div>
</div>

Answer 1

您需要在DOM准备好并将控件加载到其中后运行您的脚本。目前，根据执行流程，在视图上生成控件之前，将首先调用您的脚本，这就是它变为NULL并且您收到该错误的原因。

您可以尝试将脚本放在页面末尾。此外，在您开始在脚本中使用控件之前，只需确保控件已经加载。

希望这有帮助。

Answer 2

Harvey说的话 - 将<script>与覆盖放在页面末尾，这样可以让你正确覆盖事物。

另外

从AutoCompleteBox中删除ClientIDMode = Static
尝试__doPostBack("<%=btnServicesSearch.UniqueID%>", "");而不是click()

Answer 3

你一直都是正确的，我没有提到的一件事是这是一个用户控件。这是一个DOM问题，将代码放在母版页中仅用于测试工作

control.clientid导致javascript错误“无法读取null的click属性”

3 个答案: