Как настроить AutoCompleteExtender, чтобы разрешить только значения из списка автозаполнения? - PullRequest
Новая
       8

Как настроить AutoCompleteExtender, чтобы разрешить только значения из списка автозаполнения?

3 голосов
/ 27 октября 2009

Кто-нибудь знает, как использование AutoCompleteExtender (из AJAX Control Toolkit) не позволяет пользователю вводить что-либо, кроме предложенных значений?

Ответы [ 3 ]

1 голос
/ 04 декабря 2013

Нечто подобное может помочь вам

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" ../>
1 голос
/ 27 октября 2009

Во-первых, проверьте, не хотите ли вы использовать новый AjaxToolKit ComboBox.

Если вы не можете (например, если вы используете .NET Framework 2.0), вы можете манипулировать автозаполнением, чтобы отвечать вашим требованиям, но это головная боль, а не то, для чего был сделан элемент управления.

Предполагается, что проверки выполняются внутри javascript, вы добавляете событие для перехвата OnItemSelected. А затем создайте функцию:

функция OnItemSelected (отправитель, e)
{
- подтвердите здесь
}

Другой вариант - потребовать от пользователя выбрать значение из списка, манипулируя событиями: onchange, onclick & onblur. Но нужно некоторое время, чтобы найти правильную комбинацию.

Чтобы поднять вам настроение, я скажу вам, что это возможно (мы сделали это, но я не могу прикрепить наш код из-за проблем с авторским правом).

0 голосов
/ 13 июля 2016

Ранее отправленный ответ с использованием логического 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
    }
});

Это сделает очевидным для пользователя, что ввод не принимается.

...