Typeahead not showing all matches

38 Views Asked by At

I am using typeahead to select a specific account from a dropdown with a list of all accounts sharing an email (family members). You type in the full email, that searches the backend for all matches and typeahead should display all of them for you to select.

However, it is filtering out some matches and I don't know why.

This is the code:

$input.typeahead({
    minLength: 5,
    limit: 30,
}, {
    name: 'accounts',
    displayKey: 'fullName',
    source: function (query, sync, async) {
        if (isEmail(query)) {
            $.getJSON('{% url 'account_finder_json' %}?email=' + query, function (data) {
                data.accounts.map(function (account) {
                    account.fullName = `${account.first_name} ${account.last_name}`;
                });
                // data.accounts hold all expected results
                async(data.accounts);
            });
        }
    }
}).on('typeahead:selected', function (e, item) {
    $input.typeahead('val', '');
    confirmAccountSelection(item);
});

I have tested these two datasets (given by the backend endpoint as a JSON response):

Dataset 1:

"[
  {
    \"first_name\": \"Bero\",
    \"last_name\": \"Underfoot\",
    \"email\": \"[email protected]\",
    \"fullName\": \"Bero Underfoot\"
  },
  {
    \"first_name\": \"Falco\",
    \"last_name\": \"Underfoot\",
    \"email\": \"[email protected]\",
    \"fullName\": \"Falco Underfoot\"
  },
  {
    \"first_name\": \"Magnachar\",
    \"last_name\": \"Underfoot\",
    \"email\": \"[email protected]\",
    \"fullName\": \"Magnachar Underfoot\"
  }
]" 

Dataset 2:

"[
  {
    \"first_name\": \"Bilbo\",
    \"last_name\": \"Brandagamba\",
    \"email\": \"[email protected]\",
    \"fullName\": \"Bilbo Brandagamba\"
  },
  {
    \"first_name\": \"Frodo\",
    \"last_name\": \"Brandagamba\",
    \"email\": \"[email protected]\",
    \"fullName\": \"Frodo Brandagamba\"
  },
  {
    \"first_name\": \"Merry\",
    \"last_name\": \"Brandagamba\",
    \"email\": \"[email protected]\",
    \"fullName\": \"Merry Brandagamba\"
  },
  {
    \"first_name\": \"Pippin\",
    \"last_name\": \"Brandagamba\",
    \"email\": \"[email protected]\",
    \"fullName\": \"Pippin Brandagamba\"
  }
]" 

However, when searching [email protected] only "Bero" and "Falco" show up in the suggestion box (excluding the other one) and when searching [email protected] only "Bilbo" shows up in the box (excluding all others).

What am I missing?

edit: if I edit the dataset and add "Abel Underfoot", it results as the only match for the [email protected] search.

1

There are 1 best solutions below

2
Rais Helmy On

Did you checked your format? make sure commas is there for all.

For second one, you need to cake back your code and make sure that the system doesn't return value before it retrieved all the value.