Question

Я работаю над приложением, в котором мне нужен ввод с функцией автозаполнения , предоставляемой jQuery.Все в порядке, пока я не добавлю еще несколько элементов в <ul>, где фактически добавляются параметры.

Что мне нужно, так это некоторая «контекстная помощь», где я могу показать пользователю некоторые базовые запросы, которые он можетвойти туда.

Они появляются и, кажется, работают, пока вы не нажмете клавишу со стрелкой ВВЕРХ несколько раз.Если вы находитесь на первом элементе и нажимаете клавишу со стрелкой up, фокус перемещается на вход.Если я снова нажму клавишу со стрелкой up, появится сообщение об ошибке, и мое приложение упадет:

uncaught TypeError: Cannot read property 'value' of undefined
    at $.(fiddle.jshell.net/_display/anonymous function).(anonymous function).menufocus (https://code.jquery.com/ui/1.12.1/jquery-ui.js:5831:25)
    at HTMLUListElement.handlerProxy (jquery-ui.js:606)
........

Клавиша со стрелкой down работает без проблем.Вы можете проверить jsfiddle здесь или ниже.Как повторить ошибку:

Сфокусируйтесь на поле ввода и напишите COM;появится пустое автозаполнение
Используйте клавишу со стрелкой down для перемещения вниз на 1-2 элемента;затем с помощью клавиши со стрелкой up вернитесь к первому элементу;
Нажмите клавишу со стрелкой up, чтобы переместить фокус на поле ввода
Нажмите клавишу со стрелкой up еще раз

var tags = ["COMMAND_1", "COMMAND_2", "COMMAND_3", "COMMAND_4"];
$("#autocomplete").autocomplete({
  open: function(e, ui) {
    var autocompleteElement = $('.ui-autocomplete');
    contextualItems = ["COMMAND_1 {item}", "COMMAND_2 {item}", "COMMAND_3 {item}", "COMMAND_4 [{item_1}, {item_2}]"]

    autocompleteElement.append('<li class="ch">Contextual Help</li>');

    for (var i = 0; i < contextualItems.length; i++) {
      autocompleteElement.append('<li class="ui-autocomplete-category" style="background-color: #EEE; padding-top: 5px">' + contextualItems[i] + '</li>');
      console.log(contextualItems[i]);
    }

  },
  source: function(request, response) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(tags, function(item) {
      return matcher.test(item);
    }));
  }
});

.ch {
  background-color: #EEE;
  border-top: solid 1px grey;
  padding-top: 5px;
  text-align: center;
  font-weight: bold
}

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>autocomplete demo</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>

  <body>

    <label for="autocomplete">Select a programming language: </label>
    <input id="autocomplete">

  </body>

</html>

Я попытался изменить контекстную справку в div, я пытался использовать категории, но мне это не удалось.Можете ли вы дать мне подсказку или идею о том, как я мог бы решить эту проблему?Спасибо!

Ruzihm · Answer 1 · 26 сентября 2018

Автозаполнение Jquery-UI всегда создает меню с опцией items, которая принимает все дочерние элементы в качестве пунктов меню.К сожалению, это жестко закодировано в классе автозаполнения.Вы можете изменить опцию, чтобы избежать выбора элементов, которые не являются правильными элементами, но JQuery рекомендует не изменять его после того, как меню уже создано.Тем не менее, вы все еще можете сделать это, и это, кажется, работает для меня.Чтобы изменить параметр items в ui-menu, который создается после ввода автозамены, я сделал:

$("#autocomplete ~ .ui-menu").menu("option", "items", "> :not(.ui-autocomplete-category):not(.ch)" );

В моем примере я использовал селектор брата, чтобы вы могли указать его дляID автозаполнения (при условии, что в каждом контейнере есть не более одного автозаполнения), если хотите.Каким бы ни был лучший способ выбрать ui-menu, это то, что вам следует использовать;это был только пример.

var tags = ["COMMAND_1", "COMMAND_2", "COMMAND_3", "COMMAND_4"];
$("#autocomplete").autocomplete({
  open: function(e, ui) {
    var autocompleteElement = $('.ui-autocomplete');
    contextualItems = ["COMMAND_1 {item}", "COMMAND_2 {item}", "COMMAND_3 {item}", "COMMAND_4 [{item_1}, {item_2}]"]

    autocompleteElement.append('<li class="ch">Contextual Help</li>');

    for (var i = 0; i < contextualItems.length; i++) {
      autocompleteElement.append('<li class="ui-autocomplete-category" style="background-color: #EEE; padding-top: 5px">' + contextualItems[i] + '</li>');
      console.log(contextualItems[i]);
    }

  },
  source: function(request, response) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(tags, function(item) {
      return matcher.test(item);
    }));
  }
});

$("#autocomplete ~ .ui-menu").menu("option", "items", "> :not(.ui-autocomplete-category):not(.ch)");

.ch {
  background-color: #EEE;
  border-top: solid 1px grey;
  padding-top: 5px;
  text-align: center;
  font-weight: bold
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

  <label for="autocomplete">Select a programming language: </label>
  <input id="autocomplete">

</body>

</html>

JSFiddle at:

https://jsfiddle.net/p1y2587a/7/

Jeto · Answer 2 · 26 сентября 2018

Как уже упоминалось в комментариях, я сомневаюсь, что вы должны вручную изменить содержимое .ui-autocomplete.

. Вместо этого вы можете добавить элемент контекстной справки вне выпадающего списка и расположить его динамическипри focus (или любом другом событии, в зависимости):

var tags = ["COMMAND_1", "COMMAND_2", "COMMAND_3", "COMMAND_4"];
$("#autocomplete").autocomplete({
  source: function(request, response) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(tags, function(item) {
      return matcher.test(item);
    }));
  },

  focus: function(event, ui) {
    $('[data-context-help]')
      .css({
        top: $('.ui-autocomplete').position().top + $('.ui-autocomplete').outerHeight(true),
        left: $('.ui-autocomplete').position().left,
        width: $('.ui-autocomplete').outerWidth(true)
      })
      .text('Help for ' + ui.item.value)
      .show()
  }, 
  
  close: function(event, ui) {
    $('[data-context-help]').hide();
  }
});

.ch {
  background-color: #EEE;
  border-top: solid 1px grey;
  padding-top: 5px;
  text-align: center;
  font-weight: bold;
  position: absolute;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

  <label for="autocomplete">Select a programming language: </label>
  <input id="autocomplete">

  <div data-context-help class="ch" style="display:none">Help goes here</div>

</body>

</html>

jQuery autocomplete: неопределенное значение нажатием клавиши со стрелкой вверх

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

jQuery autocomplete: неопределенное значение нажатием клавиши со стрелкой вверх

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов