Original Example

Failed Example

Here's the returned data:

1.     var availableTags = [
2.         'ActionScript|AppleScript|Asp',
3.         'BASIC',
4.         'Clojure|C++|C|COBOL|ColdFusion',
5.         'Erlang',
6.         'Fortran',
7.         'Groovy',
8.         'Haskell',
9.         'Java|JavaScript',
10.         'Lisp',
11.         'Perl|PHP|Python',
12.         'Ruby',
13.         'Scala|Scheme',
14.     ];

How can I split the items into arrays during the `renderItem` function,and when users type PHP it will only return PHP from 'Perl|PHP|Python'?

Here's my code:

1.     $('#tags').autocomplete({
2.         source: availableTags,
3.         search: function(event, ui) {
4.             $('#wrapper').empty();
5.         },
6.     })
7.     .data('autocomplete')._renderItem = function(ul, item) {
8.         return $('<div class="element"></div>')
9.             .data('item.autocomplete', item)
10.         var smallchoice = item.label.split('|');                    
11.         $.each(smallchoice,function(j,smallchoice){
12.                $option = '<a href="#" >' + smallchoice+ '</a>'
13.              })
14.     
15.             .append($option)
16.             .appendTo($('#wrapper'));
17.     };