web-dev-qa-db-ja.com

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

JQuery UIオートコンプリートを使用しています。最小の長さを指定しています。 minLength:2を指定した場合、サービスを起動する前に2文字を入力する必要があります。 minLength:1を指定した場合、ソースサービスが起動する前に1文字入力するだけです。

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

アイデア？

更新：以下のほとんどのkarimのソリューションは機能しますが、入力をクリックするとオプションが表示され、クリックするとソースが再送信されますempty string新しいオプションではなく、オプションを選択した後に表示されるオートコンプリートオプションはよりボックスが空だったのと同じ。

javascriptjqueryhtmljquery-uiautocomplete
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"/>
55
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が自動的にまたはユーザーによってトリガーされたことを識別します。

working demo

1
Ricardo Alvaro Lohmann

提案メニューの項目をクリックすると、テキストボックスがフォーカスを取り戻すため、提案メニューが2度目に表示されますが、フォーカスが再び発生したときにテキスト値は更新されません。

どうすればこれを修正できるかわかりませんが、あなたの誰かが同様の問題に直面しているかどうかを教えてください

0
PradGar

私はこれが非常に古いスレッドであることを知っていますが、私はまったく同じ問題を抱えており、上記のソリューションはどれもうまくいかないようです...これはJqueryの更新のためだと思いますか？誰かが更新された作業（jquery-1.12.4.js // 1.12.1/jquery-ui.js）の例を投稿できるとしたら、それは素晴らしいことです。

0
Paul Clift