Разрешить только выбранные значения из выпадающего списка в поле автозаполнения - PullRequest
Новая
       9

Разрешить только выбранные значения из выпадающего списка в поле автозаполнения

0 голосов
/ 18 января 2019

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

Я ссылался на аналогичную публикацию jQuery UI AutoComplete: разрешить только выбранные значения из предложенного списка 1 , но у меня другая проблема.

Вызов в списке допустимых опций имеют специальные символы, в частности "(" и ")". Когда я набираю опцию с помощью (я вижу ее в раскрывающемся списке, но когда я использую клавиши со стрелками для выбора, она переходит к предыдущей опции.

Массив допустимых опций из PHP доступен в javascript с использованием 

var validOptions = <?php echo json_encode($validOptionsArray); ?>;

JavaScript - 

previousValue = "";

$('.getValidOptions').autocomplete({
    source: validOptions,   

}).keyup(function() {
    var isValid = false; 
    for (i in validOptions) {
       if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue;
    } else {
        previousValue = this.value;
    }
});

Я понимаю, как это происходит. Если я уберу строку 

this.value = previousValue;

это позволит мне выбрать опцию с помощью (но тогда пользователь сможет продолжить печатать.

Однако я хочу сохранить эту строку, поскольку она не позволяет пользователю добавлять текст в раскрывающийся список.

Я могу использовать мышь, чтобы выбрать опцию, но я получаю сообщение об ошибке в консоли 

Uncaught SyntaxError: Invalid regular expression: /(/

Похоже, проблема связана с функцией keyup

Я пробовал (1) charset = "utf-8" и (2) регулярное выражение, такое как 

(this.value).replace(/([.*+?^=!${}()|[\]\/\\])/g, '\\$1');

Есть мысли, как это исправить?

Спасибо.

Данные в json_encode ($ validOptionsArray) равны 

Array
(
    [0] => NI: New Member
    [1] => NI: New Member (referred from current member)
    [2] => RI: Returning Member
    [3] => RI: Returning Member (with conditions)
    [4] => XI: Exclusive member (full/all access)
)

1 Ответ

0 голосов
/ 05 февраля 2019

Я решил пойти с jQuery inputToken http://loopj.com/jquery-tokeninput/

Это легко реализовать и позволяет пользователю выбирать только доступные опции, а не редактировать их. Может быть, другие найдут это полезным.

...