Question

I have successfully attached autocomplete to the span tag with click event handler via

$('#myspan').click(function() {
 var target = $('#myvalue');
 $(this).autocomplete({
                minLength:0,                
                source: ['Apple','Banana','Strawberry'],
                select: function(event, ui) {
                    target.html(ui.item.value);
                }
            });
 $(this).autocomplete("search","");   
});​

The problem is, since there is no input box, no blur() event occurs and autocomplete remains on the screen if user clicks outside of the selector.
To see the effect, click subsequently on “Select first”, then “Select second” without actually choosing an item: http://jsfiddle.net/gtcZb/

Answer 1

Couldn’t you just make your span focusable? Addind a tabindex attribute to it will make it focusable (if you don’t want it gaining focus through Tab and Shift+Tab, use "-1" as value).

I couldn’t run your example (jsFiddle seems to be offline), but I tried to reproduce it and made it work – mostly:

HTML

<span id="myspan" tabindex="-1">abcd</span>
<span id="myvalue"></span>

JavaScript

 $('#myspan').click(function() {
     var target = $('#myvalue');
     $(this).autocomplete({
                    minLength:0,                
                    source: ['Apple','Banana','Strawberry'],
                    select: function(event, ui) {
                        target.html(ui.item.value);
                    }
                })
     $(this).autocomplete("search","").focus();
 }).blur(function() {
     var $this = $(this);
     setTimeout(function() { $this.autocomplete("close") },0);
 });​        

It’s not perfect – sometimes the autocomplete doesn’t disappear, even when the span loses focus, and I couldn’t figure out why. But it’s a start…

Edit: I forgot the setTimeout closure… Now it should work for all cases.