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

Question

有谁知道如何使用 AutoCompleteExtender（来自 AJAX Control Toolkit）防止用户输入建议值之外的任何内容？

Answer 1

首先，检查您是否愿意使用新的 AjaxToolKit ComboBox。

如果您不能（例如，如果您使用的是 .NET Framework 2.0），您可以操纵自动完成来满足您的需求，但这很令人头痛，而且并不是控件的真正用途。

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

函数 OnItemSelected (sender, e)
 {
 -- 在此验证
 }

另一种选择是要求用户通过操作事件从列表中选择值：
onchange、onclick 和模糊。但找到合适的组合需要一些时间。

为了让您振作起来，我会告诉您这是可能的（我们已经做到了，但由于版权问题我无法附上我们的代码）。

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;
}

---

Or...

使用选择时触发的 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
    }
});

这将使用户清楚地知道输入未被接受。