Jquery UI自動完成; minLength：0期

Question

我正在使用JQuery UI自動完成。 我指定最小長度。 如果我指定minLength:2我需要在服務觸發前鍵入2個字符。 如果我指定minLength:1那么我只需要在源服務觸發之前鍵入一個字符。

但是，當我指定minLength:0我仍然需要輸入一個字符。 那么0點是什么意思？ 怎么跟1 ？ 預期的和期望的行為將在輸入具有焦點時立即觸發......？

想法？

更新：在大多數情況下，karim的解決方案可以正常工作，但是當點擊輸入時會出現選項，當單擊一個時，源會重新提交空字符串而不是剛剛選中的新選項 ，因此自動完成選項選擇一個選項后，如果該框已空，則相同 。

Answer 1

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

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

我有同樣的問題，我得到了如何解決這個問題。

問題是，當選擇了一個選項時，輸入將被聚焦，這將在沒有任何過濾器的情況下運行search並再次顯示autocomplete 。

當您通過鍵盤選擇，因為此問題不會發生input已經在重點，所以這里面的代碼focus將不再運行。

因此，要解決此問題，我們必須知道何時由任何鼠標/鍵盤事件觸發焦點。

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

jQuery使用e.isTrigger來識別event何時被自動觸發或由用戶觸發。

工作演示

Answer 5

這實際上有效！ 在IE，FireFox上測試過

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

Answer 6

我知道這是一個非常老的線程，但我遇到了完全相同的問題，上面提供的解決方案似乎都沒有工作......我認為這是因為Jquery的更新？ 如果有人可以發布一個工作更新（即jquery-1.12.4.js // 1.12.1 / jquery-ui.js）的例子，那就太棒了。

Answer 7

建議菜單第二次顯示，因為單擊建議菜單中的項目會導致文本框重新獲得焦點，但是當再次觸發焦點時文本值不會更新。文本框重新獲得焦點后，將觸發建議菜單。

我不知道我們如何解決這個問題，但如果你們中的任何人面臨類似的問題，請告訴我