如果文本框中没有文本，jQuery自动完成返回空列表

问题描述：

我使用jQuery自动完成与asp.net mvc 2下的文本框，并且一切正常。我键入搜索并返回结果列表。但是，如果我键入一些字符，然后退格并删除文本框中的所有文本，我想要默认的项目列表出现。 Unfortunatley调用我的控制器的ajax不会在退格和删除所有文本后触发。如果文本框中没有文本，jQuery自动完成返回空列表

我需要提到的一件事我以稍微不同的方式使用自动完成功能。我正在使用自动完成功能来充当过滤机制。当用户输入到文本框中时，会发出ajax调用，并将结果注入到div标签中。我不希望在文本框下面显示标准下拉菜单，我只是想使用自动完成功能提供的功能，以便在输入过滤器字符串时动态显示页面中的项目列表。

我这样做是因为结果列表的数量是几百个，并且能够输入几个字符，返回一个过滤结果使其在列表中找到一个项目的速度更快。

为了解决这个问题，我尝试在文本框onchange/onkeypress/onkeyup事件中挂钩，并检查文本框中是否有任何文本，以及是否显示默认列表。但它又不想为我工作。就好像当文本从文本框中删除时文本框事件不会触发。

我想找到一种方法，以便当文本框中的文本被删除时，会自动执行默认搜索。

这里是我的html ...

<% using (this.Html.BeginForm("Filter", "Guilds")) 
     {%> 
     Filter: 
    <input type="text" name="SearchFilterText" value="" id="filterTextBox" onkeyup="onfilterchange();" /> 
    <% 
     }%> 
     <script type="text/javascript"> 
      $(function() { 
       $("#filterTextBox").autocomplete({ 
        source: [""], 

        search: function (event, ui) { 
         populatelist(); 
         return true; 
        }, 
        minLength: 1, 
        delay: 300 
       }); 
      }); 
       </script> 
    <div id="success"> 
     <% Html.RenderPartial("GuildList", this.Model); %> 
    </div> 
    <div id="error"> 
    </div>

，这里是我的头节脚本....

 


    
       function populatelist() { 
        var url = "/FilteredGuilds///"; 
        $.ajax({ 
         url: url + $("#filterTextBox").val(), 
         dataType: "html", 
         success: function(response, status, xhr) { 
          $('#success').html(response); 
          $("#error").html(""); 
         }, 
         error: function(response, status, xhr) { 
          if (status == "error") { 
           $("#success").html(""); 
           var msg = "Sorry but there was an error: "; 
           $("#error").html(msg + xhr.status + " " + xhr.statusText); 
          } 
         }    
        }); 
       } 

       function onfilterchange(){ 
        if($("#filterTextBox").val() == null | $("#filterTextBox").val() ==""){ 
        populatelist(); 
        } 
       }

这里是我的控制器行动....

 


[HttpGet] 
     public PartialViewResult Filter(string realm, DateTime date, string filter) 
     { 
      var guildNames = this._repository.GetGuildNames(date, realm); 
      if (string.IsNullOrEmpty(filter)) return PartialView("GuildList", guildNames); 
      return PartialView("GuildList", guildNames.Where(x => x.Name.ToLower().Trim().Contains(filter.ToLower().Trim())).ToList()); 
     }

有关更多详细信息，请参阅下面的答案。我的直觉是，你的字符串过滤器为空会导致控制器动作出错。你有没有把调试停止在那个返回部分？另外，我注意到你的url部分在jquery代码中是var url =“/ FilteredGuilds ///”;.我不确定你如何从那里'过滤'？（另外，为什么额外的///字符？ – 2010-07-26 10:38:38

答

Dean，

I thi如果问题'可能'与$ .ajax缓存相关，则将您先前的选择保留在本地缓存中。您可以通过添加减轻这在一定程度上：

$.ajaxSetup({ cache: false });

然而，这显然意味着你typedown（如果从文本框中删除字符）将始终查询数据库，所以对性能将造成冲击。

我还建议您在萤幕控制台中做详细的追踪，因为这会显示请求发生时发生的任何错误。您可能会发现空/空字符串会导致控制器上出现错误，并且萤火虫会突出显示此错误。

jim

如果文本框中没有文本，jQuery自动完成返回空列表

相关推荐