Question

我正在尝试从Kendo AutoComplete组件捕获文本并将其保存到变量中以便稍后在其他组件中使用。代码如下，我有jsbin.com代码的链接。注意：代码jsbin.com在IE9中不起作用，Firefox和Chrome工作正常。

当在autoComplete控件中进行selecton时，我附加了onSelect函数。然后我将dataItem分配给我的变量“selectedGeoname”。我成功地将对象的text属性写入屏幕上的元素，并使用警报确认对象填充了selectedGeoname。

但是，当我稍后尝试使用该变量将值传递给另一个组件时，该变量为null。我实例化两个组件并在$（document）ready中声明变量。我不得不相信这一切都是明确的范围，所以也许你们中的一个javascript向导可以帮助可怜的老.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>

Answer 1

您可以使用此代码作为onSelect来实现此目的：

    function onSelect(e) {

        selectedGeoname = this.value();

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

从AutoComplete对象的上下文调用时，this.value()可用于获取AC输入元素的值。

如果您需要访问范围之外的变量的当前值，可以使用此方法：$("#customer").data("kendoAutoComplete").value()。

希望这有帮助！

带有KendoUI组件的Javascript可变范围

1 个答案: