Можете ли вы ограничить ввод недействительных нажатий клавиш с помощью выпадающего списка автозаполнения jQuery UI?

Question

При использовании автозаполнения пользовательского интерфейса jQuery со списком я бы подумал, что будет возможность принудительно ввести только действительную запись ключа на основе списка. Есть ли способ запретить недействительные ключи, поэтому вы можете вводить только действительные элементы в списке? Кроме того, есть ли способ установить значение по умолчанию в выпадающем списке?

Если мой список имеет (C #, Java, Python)

Я могу начать печатать "abcds." и это позволяет мне вводить его. Я хочу, чтобы были разрешены только действительные записи.

Answer 1

ОБНОВЛЕНО 2

Tested on
Internet Explorer 6 and later
Chrome
Firefox
Opera

Демо: http://so.lucafilosofi.com/can-you-restrict-entering-invalid-keystrokes-with-jquery-ui-autocomplete-combobox

Основной код JavaScript:

    var Tags = ['csharp', 'java', 'python' ];

    $("#autocomplete").keypress(function(event) {
        //Firefox workaround..
        if (!event.which &&
            ((event.charCode || event.charCode === 0) ? event.charCode: event.keyCode)) {

            event.which = event.charCode || event.keyCode;
        }
        var charCode = String.fromCharCode(event.which).toLowerCase();
        var search_val = this.value + charCode;
        var x = search_val.length - 1;
        var match;
        for (var i = 0; i < Tags.length; i++) {
            if (charCode == Tags[i][x] && Tags[i].indexOf(search_val) != -1) {
                match = true;
            }
        }
        //Backspace functionality added!
        if (!match && event.which != 8 ) {
            event.preventDefault();
        }
    });

Примечание:

1. принудительно вводить только действительные ключи на основе списка;
2. установить значение по умолчанию;
3. легкая реализация; -)

Дайте мне знать!

Answer 2

После настройки автозаполнения используйте этот код, чтобы исключить пробел и знак равенства (коды ASCII 32 и 61). И установить по умолчанию;

     $("#myautocompletectrl").keypress(function (e) {
        if (e.which == 32 | e.which == 61) {
          e.preventDefault();
        }
     }).val('mydefaultvalue');

Он действует так, как будто клавиша никогда не была нажата (как вы говорите, вы хотели).

Проверено на автозаполнении Firefox 3.63 и jQuery UI 1.8.

Кроме того, если вы обнаружите, что дополнительно хотите реализовать функцию mustMatch в автозаполнении jQuery UI 1.8, посмотрите здесь: Как реализовать "mustMatch" и "selectFirst" в jQuery UI Autocomplete?

РЕДАКТИРОВАТЬ: Я вижу, вы уже прочитали и прокомментировали мой пост ....:)

Answer 3

Ваш вопрос также является распространенным запросом на форуме плагинов jQuery и в Как реализовать «mustMatch» и «selectFirst» в jQuery UI Autocomplete люди обсуждали эту проблему.

Принятый ответ на этот вопрос работает. Так что решение Док Хоффэйд действительно заслуживает репутации.

В качестве альтернативы вы можете использовать автозаполнение Йорна Зафферера с опцией " mustMatch ".

<script type="text/javascript">
$(document).ready(function(){
    var availableTags = ["csharp", "java", "python"];
    $("#tags").autocomplete(availableTags, {
        mustMatch: true
    });
});
</script>

<input id="tags" />

UPDATE

Изначально я упустил, что вы хотели использовать комбинированный список. Спасибо за разъяснение.

Я настроил пример со списком.

Мне нужно было сделать несколько изменений, чтобы они действительно работали в форме. Я ввел небольшую задержку, чтобы события происходили в правильном порядке. Кроме этого я вставил решение Дока Хоффидай.

Я использовал событие «change», но вы также можете получить что-то работающее, используя событие «close». Мне неприятно это говорить, но мой опыт работы с новым автозаполнением пользовательского интерфейса jQuery заключается в том, что он немного ненадежен. Вещи, кажется, портятся, когда у вас настроено более одного типа обратного вызова событий.

ОБНОВЛЕНИЕ 2

Я добавил новый пользовательский селектор на основе решения Дока Хоффидай, чтобы введенный текст не перезаписывался, когда он соответствует началу действительной опции. Я также обновил его, чтобы источник ограничивал предлагаемые варианты более точными совпадениями. Я надеюсь, что это ближе к вашим требованиям.

Я поправил свой предыдущий пример со списком.

Answer 4

$("#myautocompletectrl").keypress(function (e) {
    if (e.which == 32 | e.which == 61) {
      e.preventDefault();
    }
 }).val('mydefaultvalue');

это работает для меня ... спасибо: D