Question

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

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

想法？

更新：在大多数情况下，karim的解决方案可以正常工作，但是当点击输入时会出现选项，当点击一个时，会重新提交源空字符串而不是刚刚选择的新选项，因此选择选项后出现的自动完成选项与相同，就好像该框是空的。

Answer 1

查看search方法文档：

触发搜索事件，当时数据可用，然后将显示建议;可以用来使用像selectbox一样的按钮来打开点击时的建议。如果没有价值参数是指定的，当前的使用输入的值。 可以打电话用空字符串和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"/>

Answer 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', '');
});

Answer 3

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

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

Answer 4

这实际上有效！测试IE，FireFox

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

Answer 5

我遇到了同样的问题，我得到了解决这个问题的方法。

问题在于，当选择了一个选项时，输入将被聚焦，这将在没有任何过滤器的情况下运行search并再次显示autocomplete。

当您通过键盘选择时，由于input已经处于焦点位置，因此focus内的代码将无法再次运行，因此不会发生此问题。

因此，要解决此问题，我们必须知道焦点何时由任何鼠标/键盘事件触发。

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

e.isTrigger使用

jQuery来确定自动或由用户触发event的时间。

working demo

Answer 6

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

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

Answer 7

我知道这是一个非常老的线程，但是我遇到了完全相同的问题，并且上面提供的所有解决方案似乎都不起作用……我认为这是由于Jquery中的更新引起的吗？如果有人可以发布有效的更新示例（例如jquery-1.12.4.js // 1.12.1 / jquery-ui.js），那将是很棒的事情。

Jquery UI自动完成; minLength：0期

7 个答案: