javascript - autocomplete使用 - Jquery UI自动完成; minLength:0期



jquery ui combobox (4)

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

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

https://ffff65535.com

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

但是,当我指定minLength:0我仍然需要输入一个字符。 那么0点是什么意思? 怎么跟1 ? 一旦输入有焦点,它就会发生预期的和期望的行为......?

想法?

更新:在大多数情况下,karim的解决方案可以正常工作,但是当点击输入时会出现选项,当单击一个时,源会重新提交空字符串而不是刚刚选中的新选项 ,因此自动完成选项选择一个选项后出现的方法与盒子为空时相同


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

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

我通过实验了解为什么接受的答案(我投票)可以被认为是略微不完整的。 我添加了一些意图,使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', '');
});

查看search方法文档:

触发搜索事件,当数据可用时,将显示建议; 可以由类似选择框的按钮用于在单击时打开建议。 如果未指定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"/>





autocomplete