Question

我已通过点击事件处理程序

成功将自动完成功能附加到span标记

$('#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","");   
});

问题是，由于没有输入框，因此如果用户在选择器外单击，则不会发生blur（）事件并且屏幕上会自动完成。要查看效果，请稍后点击“选择第一个”，然后点击“选择第二个”而不实际选择项目：http://jsfiddle.net/gtcZb/

Answer 1

你不能让你的跨度集中吗？为其添加tabindex属性将使其可聚焦（如果您不希望它通过Tab和Shift + Tab获得焦点，请使用"-1"作为值）。

我无法运行您的示例（jsFiddle似乎处于脱机状态），但我尝试重现它并使其正常工作 - 主要是：

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);
 });

~~它并不完美 - 有时即使跨度失去焦点，自动完成也不会消失，我无法弄清楚原因。但这是一个开始......~~

编辑：我忘记了setTimeout闭包......现在它应该适用于所有情况。

Answer 2

我想出的另一个解决方案......也许某人将无法使用tabIndex（请参阅@mgibsonbr答案），虽然blur（）有点好看：

$('#myspan').click(function() {
     $(this).autocomplete({
                    ...same as in question...
                })
     $(this).autocomplete("search","").focus();
     //ensure autocomplete hides when user clicks somewhere else:
     var _self = $(this);
     setTimeout(function() { $('body').one("click",function(e) {
                                _self.autocomplete("close");
                });
     }, 0);
 });

如果没有使用输入框，隐藏jQuery UI自动完成的最佳方法是什么？

2 个答案: