Javascript Jquery UI 自动完成；minLength:0 问题

Jquery UI autocomplete; minLength:0 issue

提问by kralco626

I am using a JQuery UI auto-complete. I am specifying the min length. If I specify minLength:2I need to type 2 characters before the service fires. If I specify minLength:1then I only need to type one character before the source service fires.

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

However, when I specify minLength:0I still need to type one character. So whats the point of 0? how is it any different than 1? The expected, and desired, behavior would be for it to fire as soon as the input has focus...?

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

Ideas?

想法？

Update:For the most part karim's solution below works, however when clicking on the input the options come up and when one is clicked the source is resubmitted the empty stringrather than the new optionthat was just selected, so the auto-complete options that come up after selecting an option are than same as if the box had been empty.

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

回答by karim79

Check out the searchmethod documentation:

查看search方法文档：

Triggers a search event, which, when data is available, then will display the suggestions; can be used by a selectbox-like button to open the suggestions when clicked. If no value argument is specified, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.

触发搜索事件，当数据可用时，将显示建议；可以由类似选择框的按钮用于在单击时打开建议。如果未指定 value 参数，则使用当前输入的值。可以使用空字符串和 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"/>

回答by rasx

I understand through experiment why the accepted answer (I up-voted) can be considered slightly incomplete. I've added a little bit of intent to make the UX more combo-box-like:

我通过实验了解为什么可以认为接受的答案（我投了赞成票）有点不完整。我添加了一点意图，使 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', '');
});

回答by Luca

I had the same problem, and solved it this way. I think the code below makes it much clearer what is the text that is sent to the autocompletion service when the field gets focus. In particular, it is clear why it works when the field already contains something.

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

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

回答by Victor

This actually works! Tested on IE, FireFox

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

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

回答by Ricardo Alvaro Lohmann

I had the same problem and I got how to workaround this issue.

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

The problem is that when an option has been selected the input will be focused, this will run searchwithout any filter and will show the autocompleteagain.

This problem doesn't happen when you select by keyboard because the inputis already in focus, so the code which is inside focuswill not run again.

So to workaround this issue we have to know when the focus is triggered by any mouse/keyboar event.

The problem is that when an option has been selected the input will be focused, this will run searchwithout any filter and will show the autocompleteagain.

当您通过键盘选择时不会发生此问题，因为input已经处于焦点中，因此里面的代码focus将不会再次运行。

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

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

e.isTriggeris used by jQueryto identify when eventhas been triggered automatically or by user.

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

working demo

工作演示

回答by Paul Clift

I know that this is a very old thread, but I am having the exact same problem, and none of the solutions provided above seem to work... I assume that this is because of updates in Jquery? If someone could post a working updated (i.e. jquery-1.12.4.js // 1.12.1/jquery-ui.js) example, that would be fantastic.

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

回答by PradGar

the suggestion menu shows up for the second time because clicking on an item in suggestion menu causes text box to regain focus, however the text value is not updated when the focus is fired again.After the textbox regains focus, the suggestion menu is fired.

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

I dont know how we could fix this, but let me know if anyone of you are facing the similar problem

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