javascript - 自动完成功能无法正常工作

问题描述

<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. 请帮帮我。

标签： javascriptjqueryjquery-uiautocompletejquery-ui-autocomplete

考虑以下：

<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配对。

javascript - 自动完成功能无法正常工作

问题描述

解决方案

推荐阅读