jQueryUI自动完成 - 选择后模糊字段答案

【问题标题】：jQueryUI Autocomplete - blur field after selectionjQueryUI自动完成 - 选择后模糊字段
【发布时间】：2011-08-29 18:16:48
【问题描述】：

我希望能够在从下拉列表中选择一个值后模糊该字段。我目前有自动完成项目搜索焦点。

这是我所拥有的：

            $("#season").autocomplete({  
            source: function( request, response ) {
                    $.getJSON( "search.asp", {
                        term: request.term,
                        type: 'season'
                        }, response );},
            minLength: 0
        }).focus(function(event, ui){
            $(this).autocomplete("search","");
        });

【问题讨论】：

标签： javascript jquery jquery-ui autocomplete

【解决方案1】：

您可以使用“关闭”方法在输入字段上调用模糊：

$("#season").autocomplete({   
   source: function(request, response){      
   $.getJSON("search.asp", {
         term: request.term,
         type: 'season'
      }, response);
   },
   minLength: 0,
   close: function(){
      $(this).blur();
   }}).focus(function(event, ui){
   $(this).autocomplete("search", "");
});

【讨论】：

那行得通。虽然，当关闭事件被触发时，有没有办法防止下拉菜单闪烁？
@Jesse：要消除闪烁，您需要不使用焦点事件。发生的情况是，当您从列表中选择一个项目时，默认情况下它会关闭下拉菜单并将焦点添加回您的输入，这反过来又会重新打开下拉菜单。使用点击事件而不是焦点可以解决这个问题。
我最终在焦点事件上使用 setTimeout 函数并延迟 300 毫秒以防止闪烁并调用以下函数... function showSearch(id) { if ($(id).val () == "") { $(id).autocomplete('search',''); } }
对我不起作用。戴尔的解决方案也没有。输入确实失去焦点，但选项列表由于某种原因仍然存在。
对我不起作用，输入选择选项，输入中没有写入任何内容。 FF75

【解决方案2】：

自动完成有一个选择事件，当您从下拉列表中选择某些内容时会触发该事件。在这种情况下，您可以在输入中调用 .autocomplete('close') 以关闭下拉菜单。

$("#season").autocomplete({
   source: function(request, response){
      $.getJSON("search.asp", {
         term: request.term,
         type: 'season'
      }, response);
   },
   minLength: 0,
   select: function(){
      $(this).autocomplete('close');
   }
}).focus(function(event, ui){
   $(this).autocomplete("search", "");
});

熟悉这些文档确实很神奇：)

http://jqueryui.com/demos/autocomplete/

示例下方的选项卡（选项、事件、方法等）将为您提供您需要了解的所有信息。

编辑：

试试这个，对我有用，但我只在 Chrome、FF3 和 IE8 中测试过。

$("#season").autocomplete({
   source: function(request, response){
      $.getJSON("search.asp", {
         term: request.term,
         type: 'season'
      }, response);
   },
   minLength: 0,
   select: function(){
      $('#season').autocomplete('close').blur();
   }
}).click(function(event, ui){
   $(this).autocomplete("search", "");
});

通常，使用点击而不是焦点不是一个好主意。

【讨论】：

那行不通。它仍然保持打开显示结果的弹出窗口。
修改了我的答案。 Blur 不会关闭下拉菜单，所以我们在选择后调用 .autocomplete('close') 。
它现在关闭然后重新打开，因为文本框在插入值后保持焦点。
@Jesse，我再次编辑了我的答案，底部有一个新的 sn-p。

【解决方案3】：

为我找到了解决方案。您必须触发模糊并关闭“更改”。

 $("#season").autocomplete({  
            source: function( request, response ) {
                    $.getJSON( "search.asp", {
                        term: request.term,
                        type: 'season'
                        }, response );},
            minLength: 0,
            change: function (event, ui) {
              $(this).autocomplete('close').blur();
            }
        }).focus(function(event, ui){
            $(this).autocomplete("search","");
        });

【讨论】：