Можете ли вы ограничить вводить недействительные нажатия клавиш с jQuery ui AutoComplete Combobox?

Question

Когда используешь jquery ui автозаполнение поле со списком, Я бы подумал, что будет возможность заставить только допустимую ключевую запись на основе списка. Есть ли способ не допускать неверных клавиш, поэтому вы можете вводить только допустимые элементы в списке? Кроме того, есть ли способ установить значение по умолчанию Combobox?

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

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

Answer 1

Обновлено 2.

Tested on
Internet Explorer 6 and later
Chrome
Firefox
Opera

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

Код Core 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?

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

Answer 3

Ваш вопрос также, похоже, является общим запросом на JQuery Plugin Forum И в Как реализовать «Mustmatch» и «SELECTFIRST» в автозаполнении jQuery ui Люди обсуждали этот вопрос.

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

В качестве альтернативы вы могли бы использовать Автозаполнение jörn Zaefferer смультуза" вариант.

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

<input id="tags" />

ОБНОВИТЬ

Первоначально я пропустил, что хотелось, чтобы вы хотели комбикордное решение. Спасибо, что сделали это понятным.

Я настраивал пример Combobox.

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

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

Обновление 2.

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

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

Answer 4

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

Это работает для меня ... Спасибо Йоууууу: D