Jquery UIのオートコンプリート。 minLength：0 issue

Question

JQuery UIの自動補完機能を使用しています。私は最小の長さを指定しています。 minLength:2と指定すると、サービスが起動する前に2文字を入力する必要があります。 minLength:1と指定すると、ソースサービスが起動する前に1文字だけ入力する必要があります。

しかし、minLength:0と指定すると、まだ1文字入力する必要があります。だから0のポイントは何ですか？ 1とはどのように違うのですか？入力がフォーカスを持っているとすぐに、期待され、望ましい動作が発生するでしょう...？

アイデア？

更新：作品下の大部分のカリムの​​ソリューションについては、しかし、選択肢が出てくると1がクリックされたときに元だった新しいオプションのではなく、空の文字列を再提出された入力をクリックしたときオプションが選択された後に表示される自動補完オプションは、ボックスが空の場合と同じと同じです。。 searchメソッドのドキュメント

Answer 1

チェックアウト：

は データが利用可能であるとき、そして 提案が表示されます、検索イベントをトリガします。クリックしたときに 選択ボックスのようなボタンで の提案を開くことができます。値 が指定されていない場合、現在の の入力値が使用されます。 と空の文字列を指定し、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

提案メニューの項目をクリックすると、ときにフォーカスがテキスト値が更新されていない、フォーカスを取り戻すために、テキストボックスが発生するための提案メニューは、二度​​目に現れますテキストボックスがフォーカスを取り戻した後、提案メニューが起動されます。

は、私たちはこの問題を解決できる方法を知っているが、あなたの誰もが、私は同じ問題を抱えていた同様の問題

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

これは実際に動作します。 IE、FireFoxでテスト済み

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

Answer 5

私は、受け入れられた回答（私が投票した）がわずかに不完全であると考えられる理由を実験を通じて理解します。私は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 6

私は同じ問題を抱えていたし、私はこの問題を回避する方法です。

問題は、オプションが選択されている場合に入力がフォーカスされることがあり、これは、任意のフィルタなしでsearchを実行すると、再びautocompleteが表示されます。

inputに既にフォーカスがあるためキーボードで選択すると、focusのコードが再度実行されないようにするため、この問題は発生しません。

この問題を回避するには、マウス/キーボールイベントによってフォーカスがトリガーされたときを知る必要があります。

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

e.isTriggereventは、自動的に、またはユーザによってトリガされたときに識別するためにjQueryによって使用されます。 0 '：あなたははminLength `持っているとき

working demo