Question

我正在尝试使用JQuery自动完成功能，但我无法使其正常工作。当我从下拉列表中选择产品但是搜索不起作用时，输入获取值。无论我输入什么，每次都会显示2个选项。

<input style="width:80px;" id="product_code"></input>
<input style="width:220px;" id="product_name"></input>

-

var product = [
    {
        "name": "chocolate",
        "code": "050"
    },
    {
        "name": "cake",
        "code": "10000"
    }
];

$('#product_name').autocomplete({
        minLength: 2,
        source: function (request, response) {
           response($.map(product, function (value, key) {
                return {
                    label: value.name,
                    value: value.code
                }
            }));

        },
        select: function(event, ui) {
            $('#product_code').val(ui.item.value);
            $('#product_name').val(ui.item.label);
                return false;
        }
    });

Answer 1

source: function (request, response) {
    var a = [];
    for(var i=product.length; i--;)
        if(
            product[i].name.indexOf(request) > -1 ||
            product[i].code.indexOf(request) > -1
        ) a.push(product[i].name);
    response(a);
});

这将检查用户对两个属性的输入。您的示例根本不对用户的输入执行任何操作。如果您不使用，则无法指望用户输入更改结果。

Answer 2

jquery-ui自动完成的source选项可以接受一个函数，你需要记住：

回调有两个参数：

一个request对象，带有一个 term属性，它引用文本输入中当前的值。例如，如果用户在城市字段中输入“new yo”，则自动填充术语将等于“new yo”。
所以基本上你应该使用request.term
一个response回调，它需要一个参数：向用户建议的数据。应根据提供的术语过滤此数据，并且可以采用上述任何简单本地数据格式。在提供自定义源回调以处理请求期间的错误时，这很重要。即使遇到错误，也必须始终调用响应回调。这可确保窗口小部件始终具有正确的状态。

source背后的想法是，它可以让您完全控制要显示的数据，但是这也使您有责任进行所有过滤并决定显示哪些值。

如果您想检查name数组中的值的code或product是否包含您刚刚搜索过的字词，则应使用：

if (val.name.indexOf(request.term) > -1 || val.code.indexOf(request.term) > -1)

以下是一个例子：

var product = [
  {
    "name": "chocolate",
    "code": "050"
  },
  {
    "name": "cake",
    "code": "10000"
  }
];

$('#product_name').autocomplete({
  minLength: 2,
  source: function (request, response) {
    response($.map(product, function (val, i) {
      if (val.name.indexOf(request.term) > -1 || val.code.indexOf(request.term) > -1) {
        return {
          label: val.name,
          value: val.code
        };
      }
    }));
  },
  select: function(event, ui) {
    $('#product_code').val(ui.item.value);
    $('#product_name').val(ui.item.label);
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input style="width:80px;" id="product_code"></input>
<input style="width:220px;" id="product_name"></input>

JQuery自动完成功能与js对象无法正常工作

2 个答案: