Autocomplete suggestions showing undefined for Array

I’m currently implementing Algolia suggestion which I have to pull data from an array object but whenever I performed my searches it brings up undefined.

I’m not sure of what am doing wrong. Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">
    	.algolia-autocomplete {
  width: 100%;
}
.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
  width: 100%;
}
.algolia-autocomplete .aa-hint {
  color: #999;
}
.algolia-autocomplete .aa-dropdown-menu {
  width: 100%;
  background-color: #fff;
  border: 1px solid #999;
  border-top: none;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
  cursor: pointer;
  padding: 5px 4px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
  background-color: #B2D7FF;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
  font-weight: bold;
  font-style: normal;
}

    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
          <form action="#" class="form">
            <h3>Basic autocomplete.js example</h3>
            <input class="form-control" id="contacts" name="contacts" type="text" placeholder='Search by name' />
          </form>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
    <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
    <script type="text/javascript">
    	/*var client = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
		var index = client.initIndex('contacts');*/  
		var client = algoliasearch('QQVL4GOPOL', 'd93766f242500de7a13183eeeb6a7934');
		var index = client.initIndex('test1');

autocomplete('#contacts', { hint: false }, [
  {
    source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
    displayKey: 'tagarray',
    templates: {
      suggestion: function(suggestion) {
        //return suggestion._highlightResult.tagarray.value;
          return '<span>' +
            suggestion._highlightResult.tagarray.value + '</span><span>';
      }
    }
  }
]);

    </script>
  </body>
</html>

The array I want to search for looks something like this:

tagarray:["A", "B"]

Hi,

Thanks for reaching out.
If I understand correctly your issue, it seems that you get an undefined error in autocomplete.
Based on the format of the field tagarray, I believe your issue comes from your suggestion template.

If you search for A, then the _highlightResult will look something like this:

      ...
      "_highlightResult": {
        "tagarray": [
          {
            "value": "<em>A</em>",
            "matchLevel": "full",
            "fullyHighlighted": true,
            "matchedWords": [
              "a"
            ]
          },
          {
            "value": "B",
            "matchLevel": "none",
            "matchedWords": []
          }
        ]
      }

the tagarray field is still an array, and we apply the value/matchLevel system directly on the elements of the array instead of on the array itself.

So if you change suggestion._highlightResult.tagarray.value into suggestion._highlightResult.tagarray[i].value, it should work

Let me know if this solves your issue, and if you have any other questions, don’t hesitate to contact us again.

When I make the changes you suggested, the whole damn thing stopped returning suggestions.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">
    	.algolia-autocomplete {
  width: 100%;
}
.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
  width: 100%;
}
.algolia-autocomplete .aa-hint {
  color: #999;
}
.algolia-autocomplete .aa-dropdown-menu {
  width: 100%;
  background-color: #fff;
  border: 1px solid #999;
  border-top: none;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
  cursor: pointer;
  padding: 5px 4px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
  background-color: #B2D7FF;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
  font-weight: bold;
  font-style: normal;
}

    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
          <form action="#" class="form">
            <h3>Basic autocomplete.js example</h3>
            <input class="form-control" id="contacts" name="contacts" type="text" placeholder='Search by name' />
          </form>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
    <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
    <script type="text/javascript">
    	/*var client = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
		var index = client.initIndex('contacts');*/  
		var client = algoliasearch('QQVL4GOPOL', 'd93766f242500de7a13183eeeb6a7934');
		var index = client.initIndex('test1');

autocomplete('#contacts', { hint: false }, [
  {
    source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
    displayKey: 'tagarray',
    templates: {
      suggestion: function(suggestion) {
        //return suggestion._highlightResult.tagarray.value;
          return '<span>' +
            suggestion._highlightResult.tagarray[i].value + '</span><span>';
      }
    }
  }
]);

    </script>
  </body>
</html>

Hi,

Sorry, I wasn’t clear enough.
tagarray[i] was meant to show that you could access any element of the tagarray (e.g. i-th element), but the variable i still needs to be defined.

templates: {
      suggestion: function(suggestion) {
        //return suggestion._highlightResult.tagarray.value;
          return `<span>[ ${suggestion._highlightResult.tagarray.map(highlight => highlight.value).join(', ')} ]</span>`;
      }
    }

This template will render highlightedResults like this: [ A, B ] with A being bolded when you search for A

Yeah, it’s working but not the way I wanted.

When I searched for a keyword in an array it returns all the elements in the array instead of just the keyword.

eg: var tagarray = ["A", "B"]. When I searched for A it should return, A not “A”, "B"

How do you think I can solve this?

Hi,

Each element of the tagarray in the _highlightResult object will have different properties, such as value but also matchLevel, that you can use to filter out results based on the matchLevel.

For instance, you could filter out elements that have a matchLevel equal to none.
You can read more about this field here: https://www.algolia.com/doc/api-reference/api-methods/search/?language=javascript#method-response-matchlevel-2

I hope this helps.

Where do I set the matchLevel in my code.

Hi,

For your case, you can use the .filter methods that is exposed by arrays in JavaScript. As such, your code would look like this:

    templates: {
      suggestion: function(suggestion) {
        return `<span>[ ${
          suggestion._highlightResult.tagarray
            .filter(highlight => highlight.matchLevel !== 'none')
            .map(highlight => highlight.value)
            .join(', ')
        } ]</span>`;
      }
    }

Best,

Hey @Jonathan.montane,

There is one more issue.

When am typing, it shows just the element but when I clicked on the suggestion it returns all the elements in the array.

What could be the cause of this?

Please check the video below to get what am trying to explain.

Hey @Jonathan.montane,

This is what am talking about.

I believe that the method you are looking for is displayKey.
In the example you used, it is set to tagarray, which means that when you click on a result it will return the values from the tagarray field.

However, you can also set the displayKey as a function that accepts a suggestion (which will be the suggestion selected when clicking).

If you want to have the same behavior as in the suggestions, I believe you can reuse the template code method for displayKey.

Source: https://github.com/algolia/autocomplete.js

I will try it out and give feedback later. Thanks.

I can’t see the template code you are referring to @jonathan.montane