CODEWITHSUNDEEP
javascriptjqueryautocomplete
si2030
si2030

Reputation: 4035

Jquery autocomplete not working when using a complex array

I have used as a basis this question which works.

I have created a JsFiddle to try and find out why this is not working and for the life of me I cannot work it out. It will not find any results even though the result of say "H" is entered as the first letter of the lastName.

Can someone have a look and see why this is not pulling a match?

     $(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("");
                   }
               }
           });
});

Upvotes: 0

Views: 31

Answers (1)

brk
brk

Reputation: 50291

There are few typos. There is a key lasttName but you are using as 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);
      };
});

Check this jsFiddle

Upvotes: 1

Related Questions