it-swarm.com.ru

JQuery UI автозаполнение; minLength: 0 выпуск

Я использую автозаполнение пользовательского интерфейса JQuery. Я указываю минимальную длину. Если я укажу minLength:2, мне нужно набрать 2 символа, прежде чем служба сработает. Если я укажу minLength:1, мне нужно будет набрать только один символ, прежде чем сработает исходная служба.

Однако, когда я указываю minLength:0, мне все равно нужно ввести один символ. Так какой смысл в 0? чем он отличается от 1? Ожидаемое и желаемое поведение будет для него срабатывать, как только входные данные сфокусированы ...?

Идеи?

Обновление: По большей части нижеприведенное решение Карима работает, однако при нажатии на вход появляются параметры, и при щелчке по источнику повторно отправляется пустая строка, а не параметр new это было только что выбрано, поэтому параметры автозаполнения, которые появляются после выбора параметра, чем такие же, как если бы поле было пустым.

37
kralco626

Ознакомьтесь с 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"/>

54
karim79

Через эксперимент я понимаю, почему принятый ответ (я проголосовал) можно считать слегка неполным. Я добавил немного намерения сделать 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', '');
});
6
rasx

У меня была такая же проблема, и я решил ее таким образом. Я думаю, что приведенный ниже код делает намного более понятным, какой текст отправляется в службу автозаполнения, когда поле получает фокус. В частности, понятно, почему это работает, когда поле уже содержит что-то.

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

Это на самом деле работает! Проверено на IE, FireFox

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

У меня была такая же проблема, и я понял, как обойти эту проблему.

Проблема заключается в том, что при выборе параметра вход будет сфокусирован, он будет запускаться search без какого-либо фильтра и снова будет отображать autocomplete.

Эта проблема не возникает, когда вы выбираете с клавиатуры, потому что input уже находится в фокусе, поэтому код, который находится внутри focus, больше не будет запускаться.

Чтобы обойти эту проблему, мы должны знать, когда фокус срабатывает при любом событии мыши/клавиатуры.

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

e.isTrigger используется jQuery для определения того, когда event был запущен автоматически или пользователем.

рабочая демонстрация

1
Ricardo Alvaro Lohmann

меню подсказок появляется во второй раз, потому что нажатие на элемент в меню подсказок приводит к тому, что текстовое поле восстанавливает фокус, однако текстовое значение не обновляется при повторном срабатывании фокуса. После того, как текстовое поле восстанавливает фокус, открывается меню подсказок.

Я не знаю, как мы могли бы это исправить, но дайте мне знать, если кто-то из вас сталкивается с подобной проблемой

0
PradGar

Я знаю, что это очень старая тема, но у меня точно такая же проблема, и ни одно из представленных выше решений, похоже, не работает ... Я предполагаю, что это из-за обновлений в Jquery? Если бы кто-то мог опубликовать рабочий обновленный пример (например, jquery-1.12.4.js // 1.12.1/jquery-ui.js), это было бы замечательно.

0
Paul Clift