代码之家 › 专栏 › 技术社区 › Adrian Pop

jQuery autocomplete:按向上箭头键时未定义的值

autocomplete css html jquery javascript

Adrian Pop · 技术社区 · 7 年前

我正在开发一个应用程序,需要输入 autocomplete jQuery <ul> 实际添加选项的位置。

我需要的是一些“上下文帮助”,在这里我可以向用户显示一些他可以在那里输入的基本查询。

它们会出现,而且似乎可以工作,直到您多次按向上箭头键。如果在第一个元素上,按 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 here 如何复制错误:

专注于输入框并写下 COM ; 一个虚拟的自动完成将会出现
使用 向下 向上的 箭头键移回第一个元素;
按 向上的 箭头键将焦点移到输入框上
向上的

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

2 回复 | 直到 7 年前

Jeto 7 年前

正如评论中提到的,我怀疑你是否应该手动更改 .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>

Ruzihm aks786 7 年前

jqueryui的autocomplete总是创建一个带有 items 接受所有子项作为菜单项的选项。不幸的是,它是在autocomplete类中硬编码的。您可以更改该选项以避免选择不合适的项目,但是JQuery建议不要在创建菜单之后更改它。不过,你还是可以做到的,这对我来说似乎很管用。改变现状 项目 中的选项 ui-menu 是在自动更正输入之后创建的,我做了:

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

在我的示例中,我使用了同级选择器,以便您可以将其特定于autocomplete id(假设每个容器最多只有一个autocomplete)。无论什么样的方法对你来说都是最好的选择是你应该使用的;这只是一个例子。

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>

JSIDLE地址:

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