Question

我正在开发一个需要使用var q = db.SomeEntity.Where( e => e.SomeMappedProperty == "A"); var results = q.AsEnumerable().Where(w => w.MyProperty == "HELLO");提供的autocomplete函数进行输入的应用程序。一切正常，直到我在实际上添加了选项的-lgdi32中添加了更多元素为止。

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

它们出现并且似乎起作用，直到您多次按UP箭头键。如果您在第一个元素上，然后按jQuery箭头键，则焦点将移至输入。如果我再按一下<ul>箭头键，则会出现错误，并且我的应用程序崩溃：

up

up箭头键可以正常工作。您可以选中jsfiddle here或下面的一个。如何复制错误：

将焦点放在输入框上并输入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箭头键向下移动1-2个元素；然后，使用COM箭头键移回第一个元素；
按down箭头键将焦点移到输入框上
再次按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 }中的上下文帮助，尝试使用类别，但未成功。能否请您给我一个提示或想法，以解决该问题？谢谢！

Answer 1

Jquery-UI的自动完成功能将始终创建带有items选项的菜单，该菜单接受所有子项作为菜单项。不幸的是，它在autocomplete类中进行了硬编码。您可以更改选项以避免选择不是适当项目的元素，但是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位于：

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

Answer 2

如评论中所述，我怀疑您应该手动更改.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自动完成：按向上箭头键的未定义值

2 个答案: