JQuery Content Editable Plugin

A modification of the Jquery AutoComplete plugin that emulates the Facebook @friend lookup, and adds ContentEditable support, a demo below shows how to look up twitter usernames with it.

New Features:
  1. Content Editable support means that you can format your results in html, links etc like the facebook friends lookup.
  2. the @ keyboard command means you can start looking in the middle of the text you are typing, not just at the beginning.
  3. New Start Message, End Message, and No Result Messages (Enter your cursor below in demos)
Todo:
  1. Support use of Backspace to delete created item.
  2. Gracefully degrade to Textarea if ContentEditable not supported

Demo 1: Use Content Editable instead of Textarea/Input, and uses @ hotkey

Hotkeys: type some text, then after you have typed some text hit the hotkey @, and you will now get prompted for the list.

The results are now capable of being formatted in html because it is using contenteditable div

Type until there are no matching entries to see the no result message

Custom Formatter: You can pass a custom format function formatFoundResult to format the found item for insertion into html. 
                            

                                

                                    

                                    

                                

                            

                        
                            $("#ce1").autocomplete(cities, {
                                    matchContains: true,
                                    scroll: false,
                                    hotkeymode:true,
                                    noresultsmsg: 'No matches, Do you want to create {q}'
                            })
                            
                            $("#ce1b").autocomplete(cities, {
                                    matchContains: true,
                                    scroll: false,
                                    hotkeymode:true,
                                    formatResult: function(row) { return '@' + row[0] + ' ';}
                            });

Demo 2: Start, End, Not found Messages and Events and Input/Textarea's

                            $("#ac1").autocomplete(cities, {
                                    matchContains: true,
                                    scroll: false
                            });
                            $("#ac2").autocomplete(months, {
                                    matchContains: true,
                                    scroll: false,
                                    startmsg: 'Type a month "Jquery" that doesn\'t exist...',
                                    noresultsmsg: 'No matches, Do you want to create {q}'
                            }).bind("ac_noresult_click",function(event, q){
                                log.info("clicked no result message + q "+ q)
                            });
                            $("#ac3").autocomplete(cities, {
                                    matchContains: true,
                                    endmsg: 'You can select more than one item...',
                                    startmsg: 'You can select more than one item...',
                                    multiple: true,
                                    scroll: false
                            });