或...

Question

有人知道如何使用AutoCompleteExtender（来自AJAX Control Toolkit）阻止用户输入任何不属于建议值的内容吗？

Answer 1

首先，检查是否要使用新的AjaxToolKit ComboBox。

如果你不能（例如，如果你使用的是.NET Framework 2.0），你可以操纵自动完成功能来满足你的需求，但这很令人头疼，而不是真正的控制权。

检查应该在javascript中进行，你添加一个事件来捕获OnItemSelected。然后创建一个函数：

function OnItemSelected（sender，e）
{
- 在此验证
}

另一个选择是要求用户通过操作事件从列表中选择值： onchange，onclick＆amp;的onblur。但要找到合适的组合需要一些时间。

为了提升你的精神，我会告诉你这是可能的（我们已经完成了，但由于版权问题，我无法附上我们的代码）。

Answer 2

这样的事可以帮到你

的Javascript

<script type="text/javascript">
        var isItemSelected = false;

        //Handler for AutoCompleter OnClientItemSelected event
        function onItemSelected() {
            isItemSelected = true;
        }

        //Handler for textbox blur event
        function checkItemSelected(txtInput) {
            if (!isItemSelected) {
                alert("Only choose items from the list");
                txtInput.focus();
            }
        }
</script>

ASPX

<asp:Button onblur="checkItemSelected(this)" ../>
<ajax:AutoCompleteExtender OnClientItemSelected="onItemSelected" ../>

Answer 3

如果用户最初从列表中选择一个项目，然后返回并决定改为键入值，则使用布尔值isItemSelected的先前提交的答案将无法工作。

为了防止这种情况，当输入聚焦时，还应该有一个事件将isItemSelected重置为false：

<强> ASPX

<asp:TextBox onblur="checkItemSelected(this)" onfocus="resetItemSelected()"../>

<强> JS

function resetItemSelected() {
     isItemSelected = false;
}

或...

使用在select上触发的JS事件，并将值从文本框复制到隐藏字段。然后使用隐藏字段中的值进行处理。

<强> ASPX

<asp:HiddenField runat="server" ID="hf1"/>
<asp:TextBox runat="server" ID="tb1"></asp:TextBox>
<ajax:AutoCompleteExtender ID="ace1" runat="server" TargetControlID="tb1" OnClientItemSelected="userSelected" .../>

<强> JS

function userSelected(sender, e) {
    var selectedItem = e.get_value();
    $get("<%= hf1.ClientID%>").value = selectedItem;
    return false;
}

但等等......还有更多！

要增强上述功能，您可以在文本框中添加模糊事件，以验证文本框值是否与隐藏字段中的值匹配，并在值不匹配时清除文本框。

//remove value if not selected from drop down list
$('#<%=tb1.ClientID%>').blur(function () {
    if ($('#<%=hf1.ClientID%>').val() !== $(this).val()) {
        $(this).val("");
        //optionally add a message near the input
    }
});

这将使用户明白不接受输入。

如何设置AutoCompleteExtender只允许自动完成列表中的值？

3 个答案:

或...