feature request, multi key for search in object

[Johann-S]

Hi,

Thanks for that awesome plugin !

I would like to know what do you think about adding multi keys when we use an array of Objects.

For example:

const data = [
	{ label: 'test', code: '0123456789' },
	{ label: 'test2', code: '9876543210' },
]

and key would be: [ 'label', 'code' ]

I'm sorry if it's not clear but do not hesitate to ask me more details

[TarekRaafat]

Hello @Johann-S,

Thank you very much, I'm glad you like it!

Your point is totally clear, and I was actually considering implementing multiple key search functionality but thought that it might not be very useful for many people and would just bloat the library. But since you find it useful then I will definitely add it to the Roadmap.

Currently you can use multiple key just for results displaying purposes not for search as shown below.

resultItem: (data, source) => {
      return `${data.source.food} from ${data.source.city}`;
},

Hope this would be a little helpful for you for the time being until multiple key search function roll out.

Thank you for your valuable suggestion, have a good day! :)

[TarekRaafat]

Hello @Johann-S ,

Check out v4.0.0 or CDN it's just released and it supports Multiple key search as requested, here is the Codepen & release notes.

Let me know your feedback.

Cheers! :)

[Johann-S]

Oh awesome ! thank you ❤️

Edit: it works perfectly !

[krispetkov]

@TarekRaafat

Is it possible to display both results on the same line and both to have the match highlighted?
Currently they are displayed as separate rows. So what I'm trying to achieve is:

1. If have the following object:
   { "name": "test", "description": "another test"}
2. Our key property is:
   ["name", "description"]
3. How to make both highlighted whenever there is a match ❓
   resultItem: (data, source) => { return '${data.value.name} - ${data.value.description}'; }

This will just display them side by side separated with dash but will not highlight them

[TarekRaafat]

Hello @krispetkov,

Sorry for my late reply.

In order to achieve such a result, you'll need to get the user's query to be compared against the matching result string and highlight it as shown in the below code snippet.

resultItem: {
    content: (data, source) => {
       // Get query vallue
       let query = document.querySelector("#autoComplete").value;
       // Build desired result string
       const result = `${data.value.food} - ${data.value.cities}`;
       // Regular Expression Query Pattern Ignores caseSensitive
       const pattern = new RegExp(`${query}`, "i");
       // Search for a match Query in Record
       query = pattern.exec(result);
       // Returns the highlighted match					
       source.innerHTML = result.replace(query, `<span style="color: red;">${query}</span>`);
    },
    element: "li"
}

Please try it and let me know the results.

Stay safe, cheers! :)

[krispetkov]

@TarekRaafat Thank you! great answer!

One more question? Is it possible to make the engine to color more than one word?
What I mean if I have the word "test" in data.value.food and in data.value.cities to color the word in both phrases simultaneously?

Example (from your previous answer): test food name - some test city

[kasperkamperman]

I was looking to solve this problem by looking the issues. I think the API changed, right?
(Maybe others run into this when solving an issue like this, hence my comment).

So instead of

resultItem: {
  content: (data, source) => {
  }
}

We have to use:

resultItem: {
 element: (item, data) => {
 }
}

At least like the last one I could modify the element, the other option didn't work anymore.
https://tarekraafat.github.io/autoComplete.js/#/configuration?id=resultitem-optional

[TarekRaafat]

Thanks @kasperkamperman, for your helpful comment! :)

At least like the last one I could modify the element, the other option didn't work anymore.
https://tarekraafat.github.io/autoComplete.js/#/configuration?id=resultitem-optional

Would you please clarify which option you are referring to?

[kasperkamperman]

I meant that "content: (data, source)" like mentioned in this topic didn't work anymore.
But this worked "element: (item, data) => {"

So the full-code you showed in this topic would become in the most recent version (10.2.5) that I'm using:

resultItem: {
   element: (item, data) => {
       // Get query value
       let query = document.querySelector("#autoComplete").value;
       // Build desired result string
       const result = `${data.value.food} - ${data.value.cities}`;
       // Regular Expression Query Pattern Ignores caseSensitive
       const pattern = new RegExp(`${query}`, "i");
       // Search for a match Query in Record
       query = pattern.exec(result);
       // Returns the highlighted match					
       item.innerHTML = result.replace(query, `<span style="color: red;">${query}</span>`);
    },
    element: "li"
}

@TarekRaafat Thanks for the script and helpful replies.

[TarekRaafat]

Just a slight correction

resultItem: {
   // For element tag type use `tag` instead of `element`
   tag: "li",
   // For the element itself use `element` instead of `content`
   element: (item, data) => {
       // Get query value
       let query = document.querySelector("#autoComplete").value;
       // Build desired result string
       const result = `${data.value.food} - ${data.value.cities}`;
       // Regular Expression Query Pattern Ignores caseSensitive
       const pattern = new RegExp(`${query}`, "i");
       // Search for a match Query in Record
       query = pattern.exec(result);
       // Returns the highlighted match					
       item.innerHTML = result.replace(query, `<span style="color: red;">${query}</span>`);
    }
}

Cheers, and have a nice day! :)

[devcer]

I needed something like this for both name and email search. I had to use replaceAll instead to highlight both email and name.

resultItem: {
   // For element tag type use `tag` instead of `element`
   tag: "li",
   // For the element itself use `element` instead of `content`
   element: (item, data) => {
       // Get query value
       let query = document.querySelector("#autoComplete").value;
       // Build desired result string
       const result = `${data.value.name} - ${data.value.email}`;
       // Regular Expression Query Pattern Ignores caseSensitive
       const pattern = new RegExp(`${query}`, 'ig');
       // Search for a match Query in Record
       // Returns the highlighted match
        item.innerHTML = result.replaceAll(
          pattern,
          `<span style="color: red;">${query}</span>`
        );
    }
}

Is there anyway I could replace text but not the case? Example Santosh - santosh@userfocus.app and if I type Santosh(case sensitive) then email is replaced with Capital S.