在 jQuery 自动完成中覆盖 _renderItem 函数

Question

在覆盖 _renderItem 函数时，我无法让 jQuery 自动完成功能正常工作。以下代码有效，但是当我取消注释 _renderItem 时，它会破坏它。在我尝试添加 _renderItem 函数之前，其他一切似乎都正常工作。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
   $(function() {
      var availableTags = [
            <?php
            include ("./includes/open_database.php");
            $SQL = "CALL orders.get_inventory_2 ()";

            $q = mysqli_query($conn, $SQL);
            $i = 1;

            while ($qRow = mysqli_fetch_array($q))
            {
                echo '{ value: "' . $qRow["part_number"] . '", label: "' . $qRow["part_number"] . '", desc: "' . $qRow["description"] . '", file: "' . $qRow["filename"] . '", vendor: "' . $qRow["name"] . '" },';
            }

            include ("./includes/close_database.php");
            ?>
      ];

      function split(val) {
         return val.split(/;\s*/);
      }

      function extractLast(term) {
         return split(term).pop();
      }
      $("#part_numbers1")
         // don't navigate away from the field on tab when selecting an item
         .on("keydown", function(event) {
            if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
               event.preventDefault();
            }
         }).autocomplete({
            minLength: 0,
            source: function(request, response) {
               // delegate back to autocomplete, but extract the last term
               response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
            },
            focus: function() {
               // prevent value inserted on focus
               return false;
            },
            select: function(event, ui) {
               var terms = split(this.value);
               // remove the current input
               terms.pop();
               // add the selected item
               terms.push(ui.item.value);
               // add placeholder to get the comma-and-space at the end
               terms.push("");
               this.value = terms.join("; ");
               return false;
            }
         });.data("ui-autocomplete")._renderItem = function(ul, item) {
         return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
      };
   });
</script>

availableTags 变量最终看起来像这样：

var availableTags = [{
   value: "",
   label: "",
   desc: "",
   file: "",
   vendor: ""
}, {
   value: "WES504",
   label: "WES504",
   desc: "",
   file: "",
   vendor: ""
}, {
   value: "WV057C",
   label: "WV057C",
   desc: "",
   file: "",
   vendor: ""
}];

除了大约 2000 个值。

Answer 1

我在这里看到的两个问题。

首先，你有一个语法错误：

        }
     });.data("ui-autocomplete")._renderItem = function(ul, item) {
     return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
  };

我相信你希望这样：

        }
     }).data("ui-autocomplete")._renderItem = function(ul, item) {
     return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
  };

}) 和 .data 之间的额外 ; 会导致 JavaScript 读取其他命令。

第二个问题是菜单项本身：

     return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);

您希望生成的 HTML 是一个列表项，包含一个 Div，包含标签。不知道您为什么要使用链接。

你会想要使用：

     return $("<li></li>").data("item.autocomplete", item).append("<div><a>" + item.label + "<br>" + item.desc + "</div></a>").appendTo(ul);

工作示例：https://jsfiddle.net/Twisty/d4hq5txc/