jquery自动建议不工作

Question

我尝试对输入框进行自动建议。它显示建议但不基于输入过滤。

我已经尝试了不同的方法，但我无法完成。 jquery link

$(function() {
    var data =  [
  {
    "id": 346575476,
    "title": "Oval Earrings with Sterling Filigree",
    "sku": "SSEM-4206"
  },
  {
    "id": 346574563,
    "title": "#1 Test Product (for HTML)",
    "sku": "hgf"
  },
  {
    "id": 5879687568,
    "title": "11 Crystal Station Necklace",
    "sku": "GCRYS-6373"
  }
    ]; 
    $('#skurdesc').autocomplete({
        minLength: 3,
        source: function (request, response) {
           response($.map(data, function (value, key) {
                return [{
                    label: value.title,
                    value: value.sku
                },
                {
                    label: value.sku,
                    value: value.sku
                }]
            }));

    },    
        focus: function(event, ui) {
            $('#skurdesc').val(ui.item.title);
            return false;
        },

        select: function(event, ui) {

            $('#skurdesc').val(ui.item.title); 

        }
    });
});

html是

Search: <input type="text" id="skurdesc" >

Answer 1

这是你的来源，你指错了。试试这个：

＆＃13;

＆＃13;

$(function() {
    var data =  [
  {
    "id": 346575476,
    "title": "Oval Earrings with Sterling Filigree",
    "sku": "SSEM-4206"
  },
  {
    "id": 346574563,
    "title": "#1 Test Product (for HTML)",
    "sku": "hgf"
  },
  {
    "id": 5879687568,
    "title": "11 Crystal Station Necklace",
    "sku": "GCRYS-6373"
  }
    ]; 
    $('#skurdesc').autocomplete({
        minLength: 3,
        source: $.map(data, function (value, key) {
                return [{
                    label: value.title,
                    value: value.sku
                },{
                    label: value.sku,
                    value: value.sku
                }]
            }), 
        focus: function(event, ui) {
            $('#skurdesc').val(ui.item.title);
            return false;
        },

        select: function(event, ui) {

            $('#skurdesc').val(ui.item.title); 

        }
    });
});

＆＃13;

Search: <input type="text" id="skurdesc" >

＆＃13;

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/black-tie/jquery-ui.min.css" />
Search: <input type="text" id="skurdesc" >

＆＃13;

＆＃13;

＆＃13;

Answer 2

请查看演示：http://jqueryui.com/autocomplete/#multiple

这将有助于理解source用法。

尝试类似的事情：

＆＃13;

＆＃13;

$(function() {
  var data = [{
      "id": 346575476,
      "title": "Oval Earrings with Sterling Filigree",
      "sku": "SSEM-4206"
    },
    {
      "id": 346574563,
      "title": "#1 Test Product (for HTML)",
      "sku": "hgf"
    },
    {
      "id": 5879687568,
      "title": "11 Crystal Station Necklace",
      "sku": "GCRYS-6373"
    }
  ];

  $('#skurdesc').autocomplete({
    minLength: 3,
    source: function(request, response) {
      var q = request.term.toLowerCase();
      var results = [];
      $.each(data, function(k, v) {
        var s = v.sku.toLowerCase();
        if (s.indexOf(q) != -1) {
          results.push({
            label: v.title,
            value: v.sku,
            id: v.id
          });
        }
      });
      console.log("Results", results);
      response(results);
    },
    focus: function(event, ui) {
      $('#skurdesc').val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $('#skurdesc').val(ui.item.label);
      return false;
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
      .append("<div>" + item.value + ": " + item.label + "</div>")
      .appendTo(ul);
  };
});

＆＃13;

<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>
Search: <input type="text" id="skurdesc" />

＆＃13;

＆＃13;

＆＃13;