Multiple keys: Return matches from both keys?

[oleonard]

Sorry if I'm misunderstanding the documentation, but it looks to me from testing that if you specify multiple keys it will look for matches in one key or the other but not both. For example:

https://codepen.io/tarekraafat/pen/rNyBxdL

The data contains this:

    {
        "food": "Wild Boar - Tenderloin",
        "cities": "Luthu",
        "animals": "Eastern diamondback rattlesnake"
    },

A search for "wild" will return a result from that row, and a search for "luthu" will return a result from that row, but searching "wild luthu" will not return anything.

I'd like to be able to do a name search by firstname and surname so that a search for "owe leo" would return this row:

{
	"surname": "Leonard",
	"firstname": "Owen",
}

Is this currently possible?

[folknor]

The only way to accomplish this at the moment is to use the searchEngine setting; https://tarekraafat.github.io/autoComplete.js/#/configuration?id=searchengine-optional

It's also best to avoid using data.keys then, otherwise your search function will be invoked once per key.

[oleonard]

Thanks for the fast response! Are you referring do the searchEngine option of passing a function? Do you have any examples of how this works?

[folknor]

new autoComplete({
	searchEngine: (q, r) => {
		if ( r.includes(q) ) {
			return r
		}
		return false
	}
})

If you don't use config.data.keys like I said, then r will be the entire record instead of the property at the keys, so

new autoComplete({
	searchEngine: (q, r) => {
		if ( r.surname.includes(q) ) {
			return r.surname
		}
		if ( r.firstname.includes(q) ) {
			return r.firstname
		}
		return false
	}
})

[devcer]

Hi @folknor , I tried to use searchEngine but when I select an item, the selection is always undefined. any thoughts on it?

THis is my codepen - https://codepen.io/viswanathamsantosh/pen/wveBgob

[TarekRaafat]

Hello @devcer,

The issue basically within the selection event, was not pointing to the proper values as shown below.

Before

autoCompleteJS.input.addEventListener("selection", function (event) {
  const feedback = event.detail;
  autoCompleteJS.input.blur();
  // Prepare User's Selected Value
  const selection = feedback.selection.value[feedback.selection.key];
  // Render selected choice to selection div
  document.querySelector(".selection").innerHTML = selection;
  // Replace Input value with the selected value
  autoCompleteJS.input.value = selection;
  // Console log autoComplete data feedback
  console.log(feedback);
});

After

autoCompleteJS.input.addEventListener("selection", function (event) {
  const feedback = event.detail;
  autoCompleteJS.input.blur();
  // Prepare User's Selected Value
  const name = feedback.selection.value.name;
  const email = feedback.selection.value.email;
  // Render selected choice to selection div
  document.querySelector(".selection").innerHTML = `${name} - ${email}`;
  // Replace Input value with the selected value
  autoCompleteJS.input.value = `${name} - ${email}`;
  // Console log autoComplete data feedback
  console.log(feedback);
});

Here is the fixed example.

I've enhanced your searchEngine algorithm as well as shown below.

Before

  searchEngine: (q, r) => {
    if (r.name.includes(q)) {
      return r;
    }
    if (r.email.includes(q)) {
      return r;
    }
    return false;
  },

After

  searchEngine: (q, r) => {
    const query = q.toLowerCase();
    const name = r.name.toLowerCase();
    const email = r.email.toLowerCase();

    if (name.includes(query)) {
      return r;
    }
    if (email.includes(query)) {
      return r;
    }
    return false;
  },

Let me know how it works.

Have a nice day! :)

[devcer]

@TarekRaafat This works perfect! Thank you so much 😃

[TarekRaafat]

You're most welcome anytime! :)