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

Posted 2023-03-27

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

【英文标题】：jQuery autocomplete returns empty list if no text in textbox

【发布时间】：2011-03-21 00:30:05

【问题描述】：

我在 asp.net mvc 2 下使用带有文本框的 jQuery 自动完成功能，一切正常。我输入一个搜索，它会返回一个结果列表。但是，如果我输入一些字符，然后退格并擦除文本框中的所有文本，我希望出现一个默认的项目列表。不幸的是，在退格和删除所有文本后，对我的控制器的 ajax 调用不会被触发。

我需要提一提的是，我使用自动完成功能的方式略有不同。我正在使用自动完成功能来充当过滤机制。当用户在文本框中键入一个 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>

这是我在头部的脚本....

函数填充列表（） var url = "/FilteredGuilds///"; $.ajax( url: url + $("#filterTextBox").val(), 数据类型：“html”， 成功：函数（响应，状态，xhr） $('#success').html(响应); $("#error").html(""); , 错误：函数（响应，状态，xhr） 如果（状态==“错误”） $("#success").html(""); var msg = "抱歉，出现错误："; $("#error").html(msg + xhr.status + " " + xhr.statusText); ); 函数 onfilterchange() if($("#filterTextBox").val() == null | $("#filterTextBox").val() =="") 填充列表（）；

这是我的控制器操作....

[HttpGet] 公共 PartialViewResult 过滤器（字符串领域，DateTime 日期，字符串过滤器） 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());

【问题讨论】：

请参阅下面的答案以获取更多详细信息。我的直觉是，您的字符串过滤器为空会导致控制器操作出错。你有没有在返回部分设置调试停止？另外，我注意到 jquery 代码中的 url 部分是 var url = "/FilteredGuilds///";。我不确定你是如何从那里进入“过滤器”的？ （另外，为什么额外的 /// 字符？？

【参考方案1】：

院长，

我认为这个问题“可能”与 $.ajax 缓存将您之前的选择保存在本地缓存中有关。您可以通过添加以下内容在一定程度上缓解这种情况：

$.ajaxSetup( cache: false );

但是，这显然意味着您的输入（如果从文本框中删除字符）将始终查询数据库，因此会影响性能。

我还建议您在 firebug 控制台中进行详细跟踪，因为这将显示发出请求时发生的任何错误。你可能会发现 null/empty 字符串会导致控制器出错，而 firebug 会突出显示这一点。

吉姆