How to install AutoCompleteExtender to allow only values ​​from the autocomplete list?

Question

Does anyone know how using the AutoCompleteExtender (from the AJAX Control Toolkit) prevents the user from entering anything other than the suggested values?

Answer 1

First check if you prefer to use the new AjaxToolKit ComboBox.

If you cannot (for example, if you use the .NET Framework 2.0), you can manipulate autocompletion to meet your requirements, but this is a headache, not what the control was made for.

javascript, , OnItemSelected. :

  OnItemSelected (, e)
  {
  -
 }

- , : onchange, onclick 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;
}

---

...

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

, .