jQueryUI - 自动完成不显示带有 json 的下拉菜单

Question

我正在尝试使用 .jsp 文件进行自动完成，但下拉菜单未显示。

var cod = document.getElementById('item').value;

$('input#item').autocomplete({
    source: function( request, response ) {
        $.ajax({
          url: "autocomplete.jsp?cod="+cod,
          dataType: "json",
          minLength: 2,
          data: {
            maxRows: 12
          },
          success: function(data) {
              alert(data);
              response(data);
          }
        });
      }
});

我在 Chrome 上查看了“网络”，它使用参数调用了 url 并返回 OK，但下拉菜单没有显示。 PS.：来自“alert(data)”的警告对话框也没有出现。

Answer 1

你工作太努力了——做一些你不需要做的事情。并且一些用于自动完成功能的参数被传递给 ajax 函数——例如，minLength。让我们像这样重组这个调用：

$(window).load(function() {
    $('input#item').autocomplete({
        source: 'autocomplete.jsp?maxRows=12',
        minLength: 2,
        select: function (event, ui) {
            alert(ui.item.value + ' ' + ui.item.label);
        },
    });
});

在您的 jsp 中，您将收到一个名为“term”的参数，而不是“cod”。这是自动完成小部件的自动行为。

您的 jsp 将需要返回一个 JSON 数组。这个数组的每个元素也是一个有两个成员的数组，一个“值”和一个“标签”。