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

问题描述：

我已经成功地通过如果没有使用输入框，隐藏jQuery UI自动完成的最佳方式是什么？

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

连接自动完成与Click事件处理程序的跨度标签的问题是，由于没有输入框，无残影（）发生事件，如果用户点击外自动完成保留在屏幕上的选择器。要查看效果，请点击“选择第一个”，然后“选择第二个”，而不实际选择一个项目：http://jsfiddle.net/gtcZb/

你的提琴404'ed – solidau 2012-02-10 01:07:46

对不起！所有的jsfiddle似乎都离线了。不是我，但:) :) – 2012-02-10 01:48:33

答

难道你不能只让你的跨度可调焦？添加一个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封闭...现在它应该适用于所有情况。

这工作，谢谢。 – 2012-02-10 01:47:13

答

另一种解决方案我只是想出了...也许有人会无法使用的tabIndex（见@mgibsonbr答案），虽然模糊（）是更好一点：

$('#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自动完成的最佳方式是什么？

相关推荐