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

Question

I try to use jQuery UI Autocomplete function to show some data and select it. But I see some error in the console I get a javascript error (item is undefined). My code is

jq version: jquery-ui-1.10.3.custom.min.js jq-ui version: 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);
            };

The return type is list:

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

Unsure where the issue is, yet I see .append("<a>" + item.value + ">" + item.label + "</a>") and this does not make proper HTML Syntax. Would suggest you provide an example of the data returned by your URL when query is sent. — Twisty
– Twisty, Commented May 10, 2019 at 5:35

Twisty · Accepted Answer · 2019-05-10 05:51:07Z

0

It's a little unclear what you are trying to accomplish. Consider the following example:

$(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>

This seems to do what you want, yet I am not sure what Link you're trying to create.

Hope this helps.

answered May 10, 2019 at 5:51

Twisty

31k2 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

YUu Over a year ago

I try the version jquery 3.3.1 and jquery ui 1.12.1 with the extension renderItem. The ui.item still undefined. @Twisty

Twisty Over a year ago

Please clarify why you're trying to render the item in that way. It's not making sense. @XIANYU

YUu Over a year ago

stackoverflow.com/questions/44913702/… The case was similar with mine.

YUu Over a year ago

,I wanna do some code snippet, because I have to customize the return type.

Twisty Over a year ago

@XIANYU this is managed in the select callback. The function for render items is just how the items are created, not what is done with them.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related