0

Kendo AutoComplete コンポーネントからテキストをキャプチャし、それを変数に保存して、後で他のコンポーネントで使用しようとしています。コードは以下にあり、jsbin.comにコードへのリンクがあります。注: コード jsbin.com は IE9 では機能しません。Firefox と Chrome は正常に機能します。

autoComplete コントロールで selecton が作成されると、onSelect 関数が起動します。次に、dataItem を変数「selectedGeoname」に割り当てます。オブジェクトのテキスト プロパティを画面上の要素に正常に書き込み、アラートを使用して、selectedGeoname がオブジェクトによって設定されていることを確認します。

ただし、後で変数を使用して値を別のコンポーネントに渡そうとすると、変数が null になります。両方のコンポーネントをインスタンス化し、$(document)ready 内で変数を宣言します。これはすべて範囲が広いと信じなければならないので、おそらくJavaScriptウィザードの1人が、貧しい古い.Netの男がこのコードを修正するのを助けることができます.

ありがとう、

グレッグ

HTML as follows:

<!DOCTYPE html>

<html>  
  <head>
    <link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css"
    rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css"
    rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css"
    rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css"
    rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
    <title></title>
  </head>

  <body>
    <p>
      <label for="customer">Choose a customer:</label>
      <input id="customer" />
      <div id="result"></div>
    </p>
    <p>
      <label for="stores">Choose a store:</label>
      <input id="stores" />
    </p>
    <script type="text/javascript">
      $(document).ready(function () {

        $("#customer").kendoAutoComplete({
          dataTextField: "name",
          dataSource: {
            serverFiltering: true,
            transport: {
              read: {
                url: "http://ws.geonames.org/searchJSON",
                dataType: "json",
                data: {
                  featureClass: "P",
                  style: "full",
                  maxRows: 12,
                  name_startsWith: function () {
                    return $("#customer").val();
                  }
                }
              }
            },
            schema: {
              data: "geonames"
            }
          },
          filter: "startswith",
          placeholder: "Select Customer...",
          height: 500,
          suggest: true,
          select: onSelect
        });

        var selectedGeoname;

        function onSelect(e) {
          var dataItem = this.dataItem(e.item.index());
          selectedGeoname = dataItem;

          //output
          $("#result").html(selectedGeoname.name);
          alert(selectedGeoname);
        }

        $("#stores").kendoDropDownList({
          autoBind: false,
          enable: true,
          dataTextField: "StoreName",
          dataValueField: "StoreId",
          dataSource: {
            serverFiltering: true,
            transport: {
              read: {
                url: '@Url.Action("JsonGetStores", "Home")',
                data: {
                  customer: selectedGeoname
                }
              }
            }
          }
        });

      });
    </script>
  </body>
</html>
4

1 に答える 1

0

このコードを onSelect として使用して、これを実現できます。

    function onSelect(e) {

        selectedGeoname = this.value();

      //output
        $("#result").html(selectedGeoname.name);
        alert(selectedGeoname);
    }

AutoComplete オブジェクトのコンテキストから呼び出されるとthis.value()、AC 入力要素の値を取得するために使用できます。

スコープ外の変数の現在の値にアクセスする必要がある場合は、次のメソッドを使用できます $("#customer").data("kendoAutoComplete").value()。

お役に立てれば！

于 2012-09-01T12:40:37.140 に答える