2

オートコンプリート機能があります。入力ボックスでセレクチンを生成すると、選択の戻り値を取得するにはどうすればよいですか?

$(this)
.autocomplete({ 
.
.
.select: function(event, ui){
   $(this).val(ui.item.value); //$(this) will be input with selected value
    alert(ui.item.count); // how can I get the count of the selected item?
    },    
    });

つまり、オートコンプリート生成

apple

pear

orange.

ナシを選択すると、2 が返されます。

4

3 に答える 3

2

私はあなたが探している情報を入手する方法を見つけましたが、それが最善の方法でも唯一の方法でもないことを願っています。

$(this).autocomplete({
    select: function(event, ui){
       // blah
    },   
    open: function(event, ui) {
        console.log($(this).next().next().children());
    }
});

オープンイベントは、「提案メニューが開かれたとき、または更新されたときにトリガーされます」です。<input>その時点で、オートコンプリートウィジェットは、オートコンプリートがアタッチされた直後に選択するための独自のクリックリスナーを持つdom要素を作成しました。<span>（ createdもあるので、 .next()2回呼び出します。）しかし、open関数のそのコード行は、内部で作成される<li>子ノードのリストを返します。<ul>

あなたの例と一致すると<li>、次のHTMLマークアップの要素のjQueryコレクションを取得します。

<li class="ui-menu-item" role="presentation">
    <a id="ui-id-0" class="ui-corner-all" tabindex="-1">apple</a>
</li>
<li class="ui-menu-item" role="presentation">
    <a id="ui-id-1" class="ui-corner-all" tabindex="-1">pear</a>
</li>
<li class="ui-menu-item" role="presentation">
    <a id="ui-id-2" class="ui-corner-all" tabindex="-1">orange</a>
</li>

重要な注意：ここでのidタグは、要素の数値インデックスではありません。代わりに、元のソースの要素の絶対IDです。そのため、それらがシーケンシャルであるという保証はありません。例として、元のソースが実際にこれである場合、結果のデータ["apple", "banana", "pear", "starfruit", "grape", "orange"]のタグのIDは、<a>実際にはapple：ui-id-0、pear：ui-id-2、orange：になりui-id-5ます。このIDを信頼して、ユーザーがリストでクリックしたアイテムの順序を指定することはできません。これは、結果セットに対してではなく、ソースに対して絶対的なものであるためです。

（私は元々、リストに1から始まるIDを持っていましたが、ホーガンが指摘しているように、それらは0から始まります。）

その時点で、残りの方法を実行するために2つのことのいずれかを実行できます。select1つ目は、コレクション（rawまたはオブジェクト形式のように変換された）を、イベントコールバックのスコープ内にある変数に格納することです。リストを次のようなオブジェクトに変換することをお勧めします。

lastResultSet = {
    apple : 1,
    pear : 2,
    orange : 3
}

次に、.selectコードはこれを行うことができます。

var selectedIndex = lastResultSet[$(this).val(ui.item.value)];

もう1つのアプローチは.click、dom要素に独自のコールバックを設定<li><a>して、その時点でインデックスをキャプチャすることです。<li>オートコンプリートによってdom要素が破棄される前に、クリックハンドラーをバインド解除して破棄しないことで、オートコンプリートの動作を簡単に妨害したり、メモリリークを引き起こしたりする可能性があるため、これはお勧めしません。

とにかく、 jQuery UIフォーラムまたはIRCサポートチャネルでこれと同じ質問をすることをお勧めします。うまくいけば、Dom要素の暗黙の順序にそれほどひどく依存しない答えを誰かが得ることができます。

于 2013-03-05T16:16:12.293 に答える
1

このようにして、0からアイテム数-1までの数値を返すことができます

ただし、これは内部 jQuery.UI コードに依存するため、おそらく使用しないでください。

.select: function(event, ui){
    var idElements = event.toElement.id.split("-");
    var num = idElements[idElements.length-1];
    alert(num);
    },

フィドル

使い方：

Patrick M が指摘したように (彼は 1 つずれていました)、内部的にオートコンプリートは次のような要素を作成します。

<li class="ui-menu-item" role="presentation">
    <a id="ui-id-0" class="ui-corner-all" tabindex="-1">apple</a>
</li>
<li class="ui-menu-item" role="presentation">
    <a id="ui-id-1" class="ui-corner-all" tabindex="-1">pear</a>
</li>
<li class="ui-menu-item" role="presentation">
    <a id="ui-id-2" class="ui-corner-all" tabindex="-1">orange</a>
</li>

私のコードは、選択した要素の ID を取得し、最後に「シーケンス番号」を解析します。

内部生成された UI コードをこのように使用するのは悪い考えですが、今のところは機能します。

UI の内部表現を使用せず、代わりに Patrick M の提案に似たものを実装する方がはるかに優れています。または GIT からオートコンプリート用の UI コードを取得し、それをプロジェクトに追加すると、そのファイルを変更してもコードが壊れないことがわかります (ただし、UI への他の変更は可能性があります)。

このインデックスをイベントに含めるようにチームに変更を提案することもできます。

于 2013-03-05T16:35:52.400 に答える
1

jQuery Autocomplete のreponseeventを使用するだけです。

$(this).autocomplete({ 
    response: function( event, ui ) {
         alert(ui.content.length);   
    }
});

デモ: http://jsfiddle.net/dirtyd77/SLGdE/12/

お役に立てれば！

注: これは ajax で動作します。

于 2013-03-05T18:54:24.813 に答える