search

devbridge / jQuery-Autocomplete

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
Other
3.56k stars 1.66k forks source link

Contextual auto complete #827

Closed ozupey closed 3 years ago

ozupey commented 3 years ago

Hi,

First of all, thanks for the great library! :)

I've been trying to create a contextual auto complete, similar to a search query in Kibana, Discord, or Slack. This means it suggests a list of parameters to search on, such as channel: and from:, and once you select one of those items, the auto complete switches to a list of channels or names - depending on which paramater you picked. Once you've selected that channel or name, it reverts back to the parameter auto complete so you can keep going.

If you need a demonstration of this concept, you can find an advanced one here: https://demo.elastic.co/app/kibana#/dashboard/welcome_dashboard - just use the search at the top.

So far I've been able to get a basic version of this working by using .autocomplete('setOptions', { lookup: names }); inside onSelect, but I'm running into several issues - one of them being that it won't match any channels since it's trying to auto complete the input value (which is channel:) and another one being that it doesn't seem possible to override the value that actually gets inserted into the input field.

Would someone be able to give me a piece of concept or a small demo with the best approach on how to achieve this? We have a (small) budget if needed.

Thanks a lot!

thehappydinoa commented 3 years ago

I am also attempting to replicate this use case.

When the user first loads autocomplete it would have the field names name, id, status, etc.... Once one of the fields are selected the autocomplete lookup would switch to all the possible values for that field.

Desired Example:

Query: "" Suggestions: ["name", "id", "status"] Query: "name: " Suggestions: ["Jack", "Jill", "John"]

I am thinking about making a proxy function for lookup that conditionally chooses a list to draw from. But it would be amazing if this was a feature here.

tkirda commented 3 years ago

lookup already can be passed as custom function.

thehappydinoa commented 3 years ago

lookup already can be passed as custom function.

Ah I see, but it is a little unclear what that function takes in and how to use it properly. Is there any docs for the lookup function?

tkirda commented 3 years ago

Look under usage, there is a sample on using custom lookup function.