4

私は短時間でオートコンプリートに頭を悩ませようとしてきましたが、それを機能させようとして頭を壁にぶつけています。私は数多くの例を試しましたが、使用するのに十分な例はありません。

私がやろうとしていることを説明したい例を作成しました。これは MVC 3 アプリケーションです

http://jqueryui.com/autocomplete/#comboboxの jquery サイトのオートコンプリート コードを使用しています。これは、他のすべての必要な js および css ファイルと共に _Layout.cshtml ファイルのヘッダーにリンクされています。

Home/Index.cshtml で私の見解にある Div と、アクションを実行するためのボタン。

<div id="SearchDiv"></div>
<button id="SearchBtn" type="button" style="float: right">Search</button>

ビューには、SELECT 要素を作成し、ボタンのクリックも定義する js ファイルが含まれています。

<script src="@Url.Content("~/Scripts/combobox.js")" type="text/javascript"></script>

JSファイルの内容は以下の通りです。

        var theader = '<table class="tbl">\n';
        var tbody = '';

for (var i = 0; i < 10; i++) {
    if (i % 2 == 0)
        tbody += '<tr>';
    tbody += '<td><select class="SelectionControls"/><option value="0"></option>';
    tbody += '<option value="1">This is a test</option>';
    tbody += '<option value="2">This is a test 1</option>';
    tbody += '<option value="3">This is a test 2</option>';
    tbody += '<option value="4">This is a test 3</option>';
    tbody += '<option value="5">This is a test 4</option>';
    tbody += '<select></td>';

    if (i % 2 != 0)
        tbody += '</tr>\n';
}
var tfooter = '</table>';
document.getElementById('SearchDiv').innerHTML = theader + tbody + tfooter;

$(".SelectionControls").combobox();

$("#SearchBtn").click(function () {
    var readtheselectedvalue= $(".SelectionControls")[0].val();
});

コンボボックスをテーブルの画面に配置する以外にコードを実行しても何も起こりませんが、それらはすべて空です。上記のテクスチャ値をコンボボックスに入力する必要があるため、アイテムが選択されたときに選択されたテキストがコンボボックスのテキストフィールドに表示されますが、val() を読み取るときに、その選択に関連付けられた値を返す必要があります 0 - 5.

検索ボタンが押されたら値を処理する必要があるため、javascript で値 0 ～ 5 を読み取ることができる必要があります。

誰かが私がこれをどのように達成したか教えていただければ、私はこれに何年も苦労してきたのでとても感謝しています.

4

2 に答える 2

8

非常に多くのオートコンプリート スクリプトに苦労した後のヒントです。

Chosenは、これまでで最高のオートコンプリート プラグインです。

于 2013-02-21T20:45:46.120 に答える
1

私の推測では、コンボボックスを作成しているのと同じ JavaScript 関数で選択リストを作成しているため、選択リストはまだドキュメントにないため、コンボボックス プラグインはオートコンプリート リストを作成するためにそれを見つけることができません。あなたはいくつかのことを試すことができます：

  1. JavaScript で作成するのではなく、ビューの HTML で選択リストを作成するだけです。JavaScriptでそれを行う必要がある理由は本当にわかりません。次に、 document.ready() 内に .combobox() への呼び出しを配置し​​て、ドキュメントが完全に読み込まれた後にのみ呼び出されるようにします。

     $(document).ready(function() {
     (".SelectionControls").combobox();
 });

  2. JS をビルドする必要がある場合は、.combobox への呼び出しを setTimeout 内に配置してみてください。これにより、.combox 関数を呼び出す前にページを更新するのに十分な時間を与えることができ、.combobox が探しているときにそこに表示されます。

     setTimeout(function(){$(".SelectionControls").combobox()}, 0);

また、オートコンプリート コンボボックスにも苦労した後、ついに必要なすべてを実行する独自のプラグインを作成しました。試してみたい場合は、https://github.com/tmooney3979/jquery.ui.combifyにあります。

于 2013-02-21T20:50:20.617 に答える