Jqueryオートコンプリート:DOM要素を使用してソース配列を取り込む方法は?

これは標準のJqueryオートコンプリートコードです。

<script>
    $(function() {
        var availableTags = [
            "JavaScript",
            "C#",
            "VB.NET",
            "ASP.NET"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
</script>

たとえば、サーバー側(ASP.NET/PHP)を介してHTML DOM(区切られたテキストまたはtable/tr/tdで作成されたグリッド)にデータを入力できるとします。 JQueryオートコンプリートを使用するためには、それを "読む"ことができ、それを "availableTags []"に保存することは可能でしょうか?

そして、このDOM要素を非表示(表示:なし、おそらく)した場合、Jqueryはまだそれを見ることができますか?

1

2 答え

あなたが視覚的にデータを提示していないなら、私は隠されたフィールドソリューションを好むでしょう。非表示にしても表を作成する必要はありません(jqueryは操作できますが、視覚的に隠れているだけでDOMに残っています)。

.toArray()が後に続く .map()関数は、javascript配列を生成します。

<table>
    <tr><td>Value1</td></tr>
    <tr><td>Value2</td></tr>
    <tr><td>Value3</td></tr>
    <tr><td>Value4</td></tr>
    <tr><td>Value5</td></tr>
</table>

var availableTags = $('td').map(function() { return $(this).text(); }).toArray();

または区切られたテキストを隠しフィールドに入れる:

<input type="hidden" id="myhiddenfield" value="value1|value2|value3" />

var availableTags = $('#myhiddenfield').val().split('|');

In action here: Jsfiddle

1
追加された

なぜ、サーバー側のコードを出力するだけで、配列のjavascript宣言がページ上に出力されますか?このようにして解析する必要はなく、どちらのインスタンスでもサーバーサイドのコードは実質的に同じになります。

1
追加された