javascript - 为什么这个jquery自动完成脚本不关心匹配？

Question

我正在尝试让这个脚本运行几个小时。我已经完成了其中的一部分，但脚本没有处理匹配。

因此，当我开始输入内容时，它会显示数据库中的所有数据，即使它们不匹配。如果我的数据库有 3 条记录，我会查看所有记录，不管我写的是什么。

这是我的记录:

Idoya idoya@xxxx.com 123 Livingston Road xxxxxxx, XX YYYYY
Gideon gideon@xxxx.com 123 Wild Rose St. xxxxxxx, XX YYYYY 
Collin collin@xxx.com 123 Inverness Street xxxxxx, XX YYYYY

我的脚本:

$(document).ready(function(){

    $('#name').autocomplete({
        source: function(data, cb){
            $.ajax({
                url: 'index.php/PersonData/get_people',
                method: 'GET',
                dataType: 'json',
                data: {
                    name:data.term
                },
                success: function(res){
                    //cb(res);

                    var d = $.map(res, function(row){
                        return {
                            label: row.name + " " + row.mail,
                            value: row.name,
                            mail: row.mail,
                            address: row.address
                        }
                    });

                    cb(d);
                }
            });
        },
        select: function(event, ui) {
            $(this).val(ui.item.value)
            $('#mail').val(ui.item.mail)
            $('#address').val(ui.item.address);
        }
    });


});

我希望它像我开始写“Ido”时那样工作，它应该显示带有“Idoya Vinay”的一条记录。

Answer 1

收到 php 文件的响应后，您需要过滤结果。您可以引用下面的代码来做到这一点。请随意根据您的需要进行必要的更改。

$('#autocomplete').autocomplete({
  source: function(data, cb) {
    $.ajax({
      url: 'https://jsonplaceholder.typicode.com/users',
      method: 'GET',
      dataType: 'json',
      data: {
        // name:data.term
      },
      success: function(res) {
        //cb(res);

        var d = $.map(res, function(row) {
          return {
            label: row.name,
            value: row.name,
            name: row.name,
            email: row.email,
            website: row.website
          }
        });

        // to filter between items returned from $.map
        var filtered = d.filter(function(entry) {
          return entry.name.indexOf(data.term) > -1;
        })

        cb(filtered);
      }
    });
  },
  select: function(event, ui) {
    $(this).val(ui.item.value)
    $('#email').val(ui.item.email)
    $('#website').val(ui.item.website);
  }
})

<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/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />

<input id="autocomplete" type="text" placeholder="search name">
<hr>
<input type="text" id="email" placeholder="email">
<input type="text" id="website" placeholder="website">