javascript - 使用复杂数组时 Jquery 自动完成功能不起作用

Question

我用this作为基础问题哪个有效。

我创建了一个JsFiddle尝试找出为什么这不起作用，但我一生都无法解决。即使输入“H”作为姓氏的第一个字母，它也不会找到任何结果。

有人可以看一下为什么这不匹配吗？

     $(document).ready(function asdf() {


var users = [
{
  id: "5",
  userName: "Tclyde",
  firstName: "Terry",
  lasttName: "Adams",
},
{
  id: "6",
  userName: "LH",
  firstName: "Leonie",
  lasttName: "Henderson",
},
{
  id: "7",
  userName: "CharlesO",
  firstName: "Charles",
  lasttName: "O'Dwyer",
},
{
  id: "2",
  userName: "si2030",
  firstName: "Simon",
  lasttName: "O'Farrell",
},
{
  id: "4",
  userName: "blade44",
  firstName: "Clyde",
  lasttName: "Palmer",
},
{
  id: "3",
  userName: "tt2030",
  firstName: "David",
  lasttName: "Remmy",
}];

$("#search").autocomplete({
               source: function (req, responseFn) {
                   var re = $.ui.autocomplete.escapeRegex(req.term);
                   var matcher = new RegExp("^" + re, "i");
                   var a = $.grep(users, function (item, index) {
                       return matcher.test(item.lastName);
                   });
                   a = $.map(a, function (x) {
                       return {
                           label: x.lastName + ", " + x.firstName,
                           value: x.id,
                           users: x
                       };
                   });
                   responseFn(a);
               },
               select: function (event, ui) {
                   location.href = "/UserAdmin/Edit/" + ui.item.id;
               },
               change: function (event, ui) {
                   if (!ui.item) {
                       $("#search").val("");
                   }
               }
           });
});

Answer 1

有一些错别字。有一个键 lasttName 但您正在使用 lastName

$(document).ready(function() {
      var users = [{
        id: "5",
        userName: "Tclyde",
        firstName: "Terry",
        lasttName: "Adams",
      }, {
        id: "6",
        userName: "LH",
        firstName: "Leonie",
        lasttName: "Henderson",
      }, {
        id: "7",
        userName: "CharlesO",
        firstName: "Charles",
        lasttName: "O'Dwyer",
      }, {
        id: "2",
        userName: "si2030",
        firstName: "Simon",
        lasttName: "O'Farrell",
      }, {
        id: "4",
        userName: "blade44",
        firstName: "Clyde",
        lasttName: "Palmer",
      }, {
        id: "3",
        userName: "tt2030",
        firstName: "David",
        lasttName: "Remmy",
      }];

      $("#search").autocomplete({
        source: function(req, responseFn) {
          addMessage("search on: '" + req.term + "'<br/>");
          var re = $.ui.autocomplete.escapeRegex(req.term);
          var matcher = new RegExp("^" + re, "i");
          var a = $.grep(users, function(item, index) {
            return matcher.test(item.lasttName); //Changed here
          });
          a = $.map(a, function(x) {
            return {
              label: x.lasttName + ", " + x.firstName, //Changed here
              value: x.id,
              users: x
            };
          });
          addMessage("Result: " + a.length + " items<br/>");
          responseFn(a);
        },
        select: function(event, ui) {
          location.href = "/UserAdmin/Edit/" + ui.item.id;
        },
        change: function(event, ui) {
          if (!ui.item) {
            $("#search").val("");
          }
        }
      });

      function addMessage(msg) {
        $('#msgs').append(msg);
      };
});

检查这个jsFiddle