How do i use JQuery Autocomplete for multiple words

Question

I have an autocomplete field and am just wondering how can i use it for multiple words? When i type the first word it works perfect, but when i space and type in the second word, its sends the two words back to the server and of course the results are wrong!

eg. when i type the two words,

'Java javascript'

the first word 'Java', autocomplete works well, pull the list.

but when i space and type javascript, autocomplete sends 'Java +javascript' to my ajax function.

Any ideas how to fix this?

Answer 1

Looks like you can't, the built in implementation doesn't support it - you can see in the link above: "is not part of the stable release or distribution".

However, I've downloaded and use the external version, available here:

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

it's a little bigger, but the usage is exactly the same, you don't have to change anything, for multiple selection, add to the options {multiple:true}

Update

JQueryUI has now been updated for the newest versions making this answer obsolete. An uptodate example can be found here

http://jqueryui.com/demos/autocomplete/#multiple

Answer 2

If you are using the "bassistance" version of Autocomplete, it's built in. But if you are using the jQuery UI version, there is an example here:

http://jqueryui.com/demos/autocomplete/#multiple

Answer 3

$("#tagnames").autocomplete("/tags/filter", {
        max: 6,
        highlightItem: true,
        multiple: true,
        multipleSeparator: " ", 
  })

To enable auto complete for multiple words you should set options multiple : true and multipleSeparator: " "

Answer 4

Adding a comment for a more complete answer, let's say you have two possible selections with a common prefix:

ip5, ip5 battery

if the user types in the textbox ip5, the first selection above will automatically get chosen without letting the user keep typing for the second selection, to avoid this behavior, make sure you use the option

triggerSelectOnValidInput: true,