9

Chrome と Firefox の HTML5 データリスト要素の処理の間に問題が発生しています。

私はそれを悪用している可能性があります.Firefoxは私が期待する方法で処理していますが、Chromeはそうではありません. Opera では試していません。これは社内向けのページなので、使用しているブラウザを制御できます。

次のように、値と内部テキストを設定します。

<input list="Names" placeholder="Enter Name or ID" name="txtSearchValue" autocomplete="off"/>
<datalist id="Names"><%=OptionsList%></datalist>

サーバー側の値「OptionsList」は、データベース クエリから動的に作成されます。最終結果は、おおよそ次のようになります。

<option value="123">Sam's Fresh Sandwiches</option>
<option value="234">Sawatdee</option>

等

Firefox では、"S" の後に "A" (大文字と小文字を区別しない) を入力すると、上記の両方のエントリが表示されます。「W」を入力するか、マウスで Sawatdee を選択するとすぐに、テキスト ボックスに 234 が入力されます。これは、私が望んでいることです。Sawatdee ではなく 234 をサーバーに送り返したいからです。「A」を入力してから「T」を入力しても機能します。

Chrome では、必要なすべての文字を入力できますが、リストには何も表示されません。ただし、2 を入力すると、2 番目のエントリのみが表示されます。しかし、リストには 2 の後に Sawatdee が表示されます。

データリストを過度に使用/悪用していますか、それとも Chrome に問題がありますか? または、Chrome は技術的に想定されているとおりに処理しており、Firefox のバグを見つけましたか?

4

2 に答える 2

6

私は似たようなことをしようとしています。問題は、データリストがドロップダウン オプション リストのように動作するように仕様化されていないことだと思います。回避策の 1 つは、<%=OptionsList%> と配列 <%=OptionListValues %> の両方を生成することです...入力でテキスト値を取得したら、javascript を使用して、 OptionListValues を呼び出して、説明の代わりにキーをサーバーに送り返します。後部に痛みがあり、クライアント側に余分なデータ負荷が追加されますが、このサーバー側も同様に実行できると思います (入力でテキストを送信し、テキストを検索してサーバー側でキーを取得します)。

残念なことに、これに関して Chrome は FF のようには機能しません。おそらく将来的には、ブラウザーはこれに関して Mozilla のように機能するでしょう。

または、このようなこともできます。次の入力/データリストがあるとします

<input id="datalisttestinput" list="stuff" ></input>
        <datalist id="stuff">
            <option id="3" value="Collin" >
            <option id="5" value="Carl">
            <option id="1" value="Amy" >
            <option id="2" value="Kristal">
        </datalist>

jQuery (またはプレーンな JavaScript) を使用して id 値を掘り下げることができます...これが私の例です。これは少し最適化できると確信しています。

 function GetValue() {
            var x = $('#datalisttestinput').val();
            var z = $('#stuff');
            var val = $(z).find('option[value="' + x + '"]');
            var endval = val.attr('id');
            alert(endval);
        }

それでうまくいくはずです。

于 2013-03-20T18:38:45.787 に答える