0

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

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

但是，当我稍后尝试使用该变量将值传递给另一个组件时，该变量为空。我实例化了这两个组件并在 $(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>
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 回答