Jquery UI 自动完成； minLength:0 期

Posted 2023-03-05

【中文标题】Jquery UI 自动完成； minLength:0 期

【英文标题】：Jquery UI autocomplete; minLength:0 issue

【发布时间】：2011-06-04 00:05:09

【问题描述】：

我正在使用 JQuery UI 自动完成功能。我正在指定最小长度。如果我指定 minLength:2 我需要在服务触发之前输入 2 个字符。如果我指定minLength:1，那么我只需要在源服务触发之前输入一个字符。

但是，当我指定minLength:0 时，我仍然需要输入一个字符。那么0 的意义何在？它与1 有何不同？预期和期望的行为是，一旦输入具有焦点，它就会触发......？

想法？

更新：在大多数情况下，以下 karim 的解决方案有效，但是当单击输入时会出现选项，当单击一个时，源会重新提交 空字符串而不是刚刚选择的新选项，因此选择一个选项后出现的自动完成选项与与该框为空一样。 p>

【问题讨论】：

当您拥有minLength:0 时，预期的行为是什么？

基本上，您希望在关注自动完成字段时弹出所有可用结果？

嗯，不完全是，但是是的。我把你弄糊涂了吗？我希望服务返回的所有结果都弹出。然而，这可能是也可能不是所有可能的结果。例如，如果我的服务对所有剩余可能的结果进行排名并仅显示前十名，它不会显示所有可能的结果，但是，是的，自动完成将显示 Web 服务返回给它的所有结果......我希望这是有道理的... :)

如果您将第二个参数留给search 调用，它将使用字段中的值（即不包括空字符串）：.focus(function() $(this).autocomplete("search"););（jQuery 的有关此操作的文档似乎暗示空字符串有效，但不指定参数有效）

【参考方案1】：

查看search 方法文档：

触发搜索事件，当 数据可用，然后将显示 建议；可以由一个 类似选择框的按钮来打开 点击时的建议。如果没有价值 参数被指定，当前 使用输入的值。 可以调用 使用空字符串和 minLength: 0 显示所有项目。

var source = ['One', 'Two', 'Three', 'Four'];

var firstVal = source[0];

$("input#autocomplete").autocomplete(
    minLength: 0,
    source: source,
).focus(function() 
    $(this).autocomplete("search", $(this).val());
);

.ui-menu-item
  background : rgb(215, 215, 215);;  
  border : 1px solid white;
  list-style-type: none;
  cursor : pointer;


.ui-menu-item:hover
  background : rgb(200, 200, 200);



.ui-autocomplete
   padding-left:0;
   margin-top  : 5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<input id="autocomplete"/>&nbsp;<input id="submit" type="submit"/>

【讨论】：

类似$("#myAC").onFocus("search","")？ - 编辑：我猜你的编辑回答了这个问题:) 谢谢！

@kralco626 - 只需将.focus 处理程序链接到自动完成初始化，如上面的示例和演示。

@karmin - 我唯一遇到的问题是，当您单击其中一个自动完成选项时，它会重新获得焦点，这意味着它会再次打开搜索内容。假设我可以在焦点处理程序中有一个if(length of text in search box <= 0)...应该这样做...

@karmin - 抱歉，根本问题不在于您的代码。这是我的服务，当我没有将任何内容返回到自动完成时，这导致了一个问题。我修复了它，现在你的解决方案工作得很好:)

@karmin - 我不知道为什么，但是在if 语句中添加实际上导致自动完成打开空字符串结果的问题选择一个选项后再次。对我来说没有任何意义，但如果没有它是否完美。使用if，如果我单击输入框并选择一个选项，自动完成会将我选择的选项放入输入框中。但随后再次显示选项，就好像输入为空一样。

【参考方案2】：

我通过实验了解为什么可以认为已接受的答案（我赞成）略微不完整。我添加了一些意图，使 UX 更像组合框：

$('#Carrier').autocomplete(

    source: '@Url.Action("AutocompleteCarrier", "Client")',
    minLength: 0,
    select: function (event, data) 
        $(this).autocomplete('disable');
    
)
.blur(function()
    $(this).autocomplete('enable');
)
.focus(function () 
    $(this).autocomplete('search', '');
);

【讨论】：

是的，这是 Internet Explorer 的必备解决方案。

【参考方案3】：

我有同样的问题，并以这种方式解决。我认为下面的代码可以更清楚地说明当字段获得焦点时发送到自动完成服务的文本是什么。特别是，当字段已经包含某些内容时，它为什么会起作用是很清楚的。

$(function() 
$("input#autocomplete").autocomplete(
        source: "completion.html",
        minLength: 0,
        select: function( event, ui ) 
    );
);
$("input#autocomplete").focus(function() 
    $(this).autocomplete("search", $(this).val());
);

【参考方案4】：

我遇到了同样的问题，我知道了如何解决这个问题。

The problem is that when an option has been selected the input will be focused, this will run search without any filter and will show the autocomplete again. 当您通过键盘选择时不会出现此问题，因为input 已经处于焦点位置，因此focus 中的代码将不会再次运行。 因此，要解决此问题，我们必须知道焦点何时由任何鼠标/键盘事件触发。

jQuery("input#autocomplete").focus(function(e) 
    if(!e.isTrigger) 
        jQuery(this).autocomplete("search", "");
    
    e.stopPropagation();
);

jQuery 使用e.isTrigger 来识别event 何时被自动触发或由用户触发。

working demo

【参考方案5】：

这确实有效！在 IE、FireFox 上测试

$("input#autocomplete").autocomplete(
minLength: 0,
source: source,
).focus(function() 
        setTimeout( "if ($('#input#autocomplete').val().length == 0) $('#input#autocomplete').autocomplete(\"search\", \"\"); ",1);
    );

【参考方案6】：

建议菜单第二次出现是因为单击建议菜单中的某个项目会使文本框重新获得焦点，但是再次触发焦点时文本值不会更新。文本框重新获得焦点后，建议菜单被解雇了。

我不知道如何解决这个问题，但如果你们中的任何人遇到类似问题，请告诉我

【讨论】：

rasx 的回答做得很好

【参考方案7】：

我知道这是一个非常古老的线程，但我遇到了完全相同的问题，并且上面提供的解决方案似乎都不起作用......我认为这是因为 Jquery 中的更新？如果有人可以发布工作更新（即 jquery-1.12.4.js // 1.12.1/jquery-ui.js）示例，那就太好了。