I am using jQuery's autocomplete and its giving me weird results. I am trying to get the results of either the first or last name. Right now if I start typing I only get by last name. Sometimes I get only by first name. Is there a way to do this by both first and last name?

$('#userAutoComplete').autocomplete({
  minLength: 2,
  source: function(request, response) {
    response($.map(sourceValues, function(value, key) {
      var name = value.firstName   " "   value.lastName;
      name = name.toLowerCase();
      console.log(request.term);

      if (name.indexOf(request.term.toLowerCase()) != -1) {
        return {
          label: value.firstName   " "   value.lastName,
          value: value.userId
        }
      } else {
        return null;
      }
    }));
  },
  select: function(event, ui) {
    event.preventDefault();
    $('#userAutoComplete').val(ui.item.label);
    $('#specificUserId').val(ui.item.value);
  }
});

Here is a sample of what sourceValues is:

({userId: 1, firstName: "Bob" lastName: "Smith"}, {userId: 2, firstName: "Mike" lastName: "Garcia"}, {userId: 3, firstName: "Bob" lastName: "Garcia"}, {userId: 4, firstName: "Mike" lastName: "Smith"})

CodePudding user response：

Don't return null - filter() first, map() afterwards.

// this resolves after 2s for demo purposes
const sourceValues = mockAjaxRequest([
  {userId: 1, firstName: "Bob", lastName: "Smith"},
  {userId: 2, firstName: "Mike", lastName: "Garcia"},
  {userId: 3, firstName: "Bob", lastName: "Garcia"},
  {userId: 4, firstName: "Mike", lastName: "Smith"}
], 2000);

$('#userAutoComplete').autocomplete({
  minLength: 2,
  source: function (request, response) {
    const term = request.term.toLowerCase();
    sourceValues.done(values => {
      const matches = values.filter(value => {
        var name = value.firstName   " "   value.lastName;
        return name.toLowerCase().includes(term);
      }).map(value => ({
        label: value.firstName   " "   value.lastName,
        value: value.userId
      }));
      response(matches);
    });
  },
  select: function(event, ui) {
    event.preventDefault();
    $('#userAutoComplete').val(ui.item.label);
    $('#specificUserId').val(ui.item.value);
  }
});

function mockAjaxRequest(value, delay) {
    var req = $.Deferred();
    setTimeout(() => req.resolve(value), delay);
    return req.promise();
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<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>

<input id="userAutoComplete">
<input id="specificUserId" readonly>