自动完成功能无法正常工作答案

【问题标题】：Autocomplete feature not working properly自动完成功能无法正常工作
【发布时间】：2020-10-12 14:38:31
【问题描述】：

<html>
<head>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<title>Welcome to the page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script> 
</head>
<body>
<input type="text" id="suggestion" />
</body>

<script type="text/javascript">
$.getJSON( "data.json", function( data ) {
      
      var data_arr = data.map(function(val){
                 return val.name;
        })
       
       auto(data_arr)
     });
         
    function auto(data_arr){

        $('#suggestion').autocomplete({
            source: data_arr    
        }).data("ui-autocomplete")._renderMenu = function (ul, items) {
            var that = this;
            var val = that.element.val();
            $.each($.grep(items, function (value, key) {
                return new RegExp(val.toLowerCase()).test(value.value.toLowerCase().slice(0, val.length))
            }), function (index, item) {
                that._renderItemData(ul, item);
            });
        };
    }
    
</script>
</html>

数据.json

[  
        {
            "id": "136599",
            "name": "CE712A#BGJ"
        },
        {
            "id": "137704",
            "name": "12C#ABA"
        },
        {
            "id": "137705",
            "name": "F2212A#ABA"
        }
]

以上代码适用于data.json 文件中存在的所需值。一旦输入除data.json 文件之外的任何值，建议就会弹出一点并消失。当data.json 中不存在输入时，我实际上不希望显示任何内容。请帮帮我。

【问题讨论】：

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

【解决方案1】：

考虑以下几点：

<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<input type="text" id="suggestion" />
<script type="text/javascript">
  $('#suggestion').autocomplete({
    source: function(req, resp) {
      $.getJSON("data.json", function(data) {
        var data_arr = $.ui.autocomplete.filter(data.map(function(val) {
          return val.name;
        }), req.term);
        resp(data_arr);
      });
    }
  });
</script>

如果您使用函数作为源，您可以在将 JSON 输出的结果传递给自动完成之前调整它们。如果需要，您可以考虑将它们映射到 label 和 value 对。

【讨论】：

@Beginner 它已经在“实际代码”中，但我无法使用 AJAX 调用进行测试。您必须更新和调整代码以进行测试。
这是我得到的错误：Uncaught TypeError: Cannot read property 'label' of undefined at jquery-ui.js:7143 at Function.grep (jquery.min.js:2) at Function .filter (jquery-ui.js:7142) at Object.success ((index):16) at j (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2)在 x (jquery.min.js:4) 在 XMLHttpRequest.b (jquery.min.js:4)