0

Здравствуйте. Пытаюсь сделать поле ввода, вводя в которое первые буквы, всплывает список с подсказками, из имеющегося массива слов. И если введенное слово есть в массиве, кнопка submit становится активной и можно отправить форму. Это уже реализовал(общими усилиями) - https://jsfiddle.net/f67v76mb/

$("#tags").keyup(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC"
    ];

    if(availableTags.indexOf($(this).val()) == -1 ) {
      $('input[type="submit"]').prop('disabled', true);
    } else {
      $('input[type="submit"]').prop('disabled', false);
    }

    $("#tags").autocomplete({
      source: availableTags
    });
});

Но в данном решении, если выбрать слово из всплывающего списка, кнопка активной не становится, нужно обязательно вводить слово целиком + учитывает регистр почему-то.

Буду очень благодарен за любую полезную информацию. С ajax, js работаю очень редко...

1 ответ 1

3

Всё верно, у вас проверка вхождения элемента в массив выполняется по событию keyup - ввод текста в поле, по событию выбора значения в меню у вас ничего и не должно происходить сейчас.

В jquery UI Autocomplete есть событие close, которое сработает при закрытии меню с подсказками(когда мы выберем какой-либо пункт - меню закрывается) - можно проверять наличие элемента в массиве по нему.

По второму вопросу - тоже всё верно indexOf, как и в целом js чувствителен к регистру. Соответственно можно создать еще один массив, в котором все элементы перевести в верхний регистр при помощи функции toUpperCase и, при вводе или выборе значения сравнивать значение поля с элементами нового массива, предварительно так же переводя его(значение поля) в верхний регистр

var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC"
];

var availableTagsUpperCase = availableTags.map(function(value) {
  return value.toUpperCase();
});

function checkTags(){
 if(availableTagsUpperCase.indexOf($("#tags").val().toUpperCase()) == -1 ){
    $('input[type="submit"]').prop('disabled', true);
  }else{
    $('input[type="submit"]').prop('disabled', false);
  }
}

$("#tags").keyup(function(){
  checkTags();
});

$( "#tags" ).autocomplete({
  source: availableTags,
  close: function() {
    checkTags();
  } 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<input type="text" name="tags" id="tags" />
<input type="submit" value="submit" disabled />

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.