Jquery UI 自动完成；minLength:0 问题 [英] Jquery UI autocomplete; minLength:0 issue

问题描述

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

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

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

However, when I specify minLength:0 I 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...?

想法?

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

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 string rather than the new option that 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.

推荐答案

查看search 方法文档:

Check out the search method documentation:

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

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.

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"/>

这篇关于Jquery UI 自动完成；minLength:0 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！