Search jQuery

jQuery Forum

Using jQuery UI

justme84

Is there a way to use "mixed mode" for autocomplete

in Using jQuery UI • 4 months ago

Hi,

What I mean is, we know how to do value/label pair for items, i.e.

var availableTags = [

{value:"1",label:"apple"},

{value:"2",label:"orange"}

]

What I wonder is, if we can do something like

var availableTags = [

{value:"1",label:"apple"},

{value:"2",label:"orange"},

{123,234,345}

]

so that we can perform autocomplete by either ID or Name. Doable?

Thanks in advance.

Replies(4)

mike_laird

Re: Is there a way to use "mixed mode" for autocomplete

4 months ago

I think you are asking 2 separate questions, or maybe I misunderstand. It is possible to have more items in the array than just label and value. Label items appear in the dropdown, value items go into the value of the input box. If you need a number item for some other use (a function, a hidden input, etc.) just add it to the object. The following is valid

var availableTags = [

{value:"1",label:"apple", number: 123},

{value:"2",label:"orange", number: 234}

]

So far as performing autocomplete with either ID or name, it is possible to use any jQuery selector for Autocomplete. ID is by far the most common because it is unique. Maybe you meant something else in that question.

justme84

Re: Is there a way to use "mixed mode" for autocomplete

4 months ago

You're right I didn't phrase my question in a way that's easy for understanding.

Let's say you're in a factory, which produces many parts, now, you need to select some parts.

Naturally for most people it's easier to remember part name than part number, in the meantime, some part number is well known because of very frequent use... hence, there's a need to auto suggest either a part name or part number, (and programming-wise, we want to pass ID along...) and let me modify the following sample,

var availableTags = [

{value:"pNum123",label:"engine widget"},

{value:"pNum345",label:"exhaustion pipe"},

{pN888,pN999}

]

Expected outcome:

typing any of the following would perform autocomplete:

eng

exh

pn8

pn9

Thanks in advance.

mike_laird

Re: Is there a way to use "mixed mode" for autocomplete

4 months ago

If you want pn8 to appear in the dropdown and be autocompleted to pn888, then pn888 has to be assigned to label. So it would be something like value:"pN888", label:"pn888". The same goes for pn9. This is the arrangement for local data, like your availableTags example. Other approaches are possible when using data from a remote server, but they do not look/work like your question's example. If you are interested, or if you will have large numbers of part numbers (thus requiring a remote server and database), take a look at the Autocomplete documentation for its source: option.

http://api.jqueryui.com/autocomplete/

justme84