Jquery UI Autocomplete Custom HTML (TypeError: t.item is undefined)

Posted 2023-05-08

【中文标题】Jquery UI Autocomplete Custom HTML (TypeError: t.item is undefined)

【英文标题】：

【发布时间】：2019-09-27 22:44:39

【问题描述】：

我尝试使用 jQuery UI 自动完成功能来显示一些数据并选择它。 但是我在控制台中看到了一些错误 我收到一个 javascript 错误（项目未定义）。 我的代码是

jq 版本： jquery-ui-1.10.3.custom.min.js jq-ui版： jquery-1.10.2.min.js

 $("#searchterms").autocomplete(
            minLength: 2,
            source: '@(Url.RouteUrl("OrderSkuSearch"))',
            focus: function (event, ui) 
                $("#searchterms").val(ui.item.label);
                $("#productid").val(ui.item.id);
                console.log("focus: " + ui.item.id);
                return false;
            ,
            select: function (event, ui) 
                $("#searchterms").val(ui.item.value);
                $("#productid").val(ui.item.id);
                console.log("select: " + ui.item.id);
                return false;
            ,

            autoFocus: true,
            delay: 3000

        )
            .data("ui-autocomplete")._renderItem = function (ul, item) 
                //if ($("#productid").val() == "") 
                //    $("#productid").val(item.id);
                //
                $("#productid").val(item.id);
                return $("<li>")
                .append("<a>" + item.value + ">" + item.label + "</a>")
                .appendTo(ul);
            ;

返回类型为列表：

["label":"Build your own computer","value":"COMP_CUST","id":1]

【问题讨论】：

不确定问题出在哪里，但我看到了.append("<a>" + item.value + ">" + item.label + "</a>")，这并没有正确的 html 语法。建议您提供发送查询时 URL 返回的数据示例。

【参考方案1】：

有点不清楚您要完成什么。考虑以下示例：

$(function() 
  var terms = [
    label: "Label 1",
    value: "Value 1",
    id: 1001
  , 
    label: "Label 2",
    value: "Value 2",
    id: 1002
  , 
    label: "Label 3",
    value: "Value 3",
    id: 1003
  ];

  $("#searchterms").autocomplete(
    minLength: 2,
    source: terms,
    focus: function(event, ui) 
      $("#searchterms").val(ui.item.label);
      $("#productid").val(ui.item.id);
      console.log("focus: " + ui.item.id);
      return false;
    ,
    select: function(event, ui) 
      $("#searchterms").val(ui.item.value);
      $("#productid").val(ui.item.id);
      console.log("select: " + ui.item.id);
      return false;
    ,
    autoFocus: true,
    delay: 3000
  );
);

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="searchterms">Search: </label>
  <input type="text" id="searchterms" />
  <input type="text" id="productid" />
</div>

这似乎可以满足您的需求，但我不确定您要创建的链接是什么。

希望这会有所帮助。

【讨论】：

我尝试使用扩展名为 renderItem 的 jquery 3.3.1 和 jquery ui 1.12.1 版本。 ui.item 仍未定义。 @Twisty

请说明您为什么要尝试以这种方式呈现项目。这没有意义。 @XIANYU

***.com/questions/44913702/… 情况和我的差不多。

,我想做一些代码sn-p，因为我要自定义返回类型。

@XIANYU 这是在select 回调中管理的。渲染项目的功能只是项目的创建方式，而不是它们的作用。