Jquery自动完成返回结果，但结果没有显示任何内容答案

【问题标题】：Jquery autocomplete returns result, but result is not showing anythingJquery自动完成返回结果，但结果没有显示任何内容
【发布时间】：2017-04-10 19:36:53
【问题描述】：

我在使用 jQuery 自动完成时遇到问题。我正在使用下面的函数来获取inputACCO_KEY 的结果。问题是，我没有看到结果——但显然函数返回了一些东西，因为我在 div 下面看到了自动完成表单——但它总是空的。有时它更长，有时更短（取决于返回多少结果），但它总是空的。如果我从该空表中选择某些内容，则输入中显示的结果也是空的。

功能：

$("#inputACCO_KEY").autocomplete({
      source: function (request, response) {
        $.ajax({
          method: 'post',
          url: "/wsSearchCAMERC/GetCAACCOSearchAll/",          
          data: {
            prefixText: $("#inputACCO_KEY").val(),
            count: 30
          },
          dataType: 'json',
          success: function (data) {
            response($(data).map(function (item, i) {              
              return {                
                label: item.First,
                value: item.Second
              };
            })
            );
          },
          error: function (data) {
            alert('error');
          }
        });
      },
      minLength: 3,
      select: function (event, ui) {        
        log("Selected: " + ui.item.value + " aka " + ui.item.id);
      }
    });
  });

结果的类型：

    ["{"First":"BOŠTJA S.P.","Second":"160001670"}", 
"{"First":"GOLF KLUB","Second":"110001615"}", "{"First":"IRENA","Second":"150001322"}"]

【问题讨论】：

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

结果的类型：

["{"First":"BOŠTJA S.P.","Second":"160001670"}", "{"First":"GOLF KLUB","Second":"110001615"}", "{"First":"IRENA","Second":"150001322"}"]

这听起来很奇怪。我假设内部字符串分隔符被转义，所以你有一个字符串数组。如果这是您的情况，您需要将地图功能更改为：

var data = ["{\"First\":\"BOŠTJA S.P.\",\"Second\":\"160001670\"}", "{\"First\":\"GOLF KLUB\",\"Second\":\"110001615\"}", "{\"First\":\"IRENA\",\"Second\":\"150001322\"}"];
var result = $(data).map(function (idx, ele) {
    var item = JSON.parse(ele);
    return {
        label: item.First,
        value: item.Second
    };
});

console.log(result);

$( "#tags" ).autocomplete({
    source: function (request, response) {
        var data = ["{\"First\":\"BOŠTJA S.P.\",\"Second\":\"160001670\"}", "{\"First\":\"GOLF KLUB\",\"Second\":\"110001615\"}", "{\"First\":\"IRENA\",\"Second\":\"150001322\"}"];
        response($(data).map(function (idx, ele) {
            var item = JSON.parse(ele);
            return {
                label: item.First,
                value: item.Second
            };
        }));
    }
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

【讨论】：

【解决方案2】：

Select 方法必须返回 false。否则，它不会按预期工作。

完整的工作示例：

$("#inputACCO_KEY").autocomplete({
      source: function (request, response) {
        $.ajax({
          method: 'post',
          url: "/wsSeCAMERC/GetCA/",
          data: {
            prefixText: $("#inputACCO_KEY").val(),
            count: 30
          },
          dataType: 'json',
          success: function (data) {
            response($.map(data, function (item, i) {
              return {
                label: item.cACCO_NME,
                value: item.iACCO_KEY
              };
            })
            );
          },
          error: function (data) {
            alert('error!');
          }
        });
      },
      minLength: 3,
      select: function (event, ui) {
        $("#inputACCO_KEY").val(ui.item.label);
        $("#iACCO_KEY").val(ui.item.value);
        return false;
      }
    });
  });

【讨论】：