テロリックオートコンプリートのドロップダウンリスト値とテキスト

私はテリックUIから単純な自動完成のドロップダウンリストを持っています。単にjQueryのドロップダウンリストからテキストと値を取得したいと思っています。は、ここで私はりんごテロリックオートコンプリートのドロップダウンリスト値とテキスト

私が欲しいを選択私は、ドロップダウンlist.sayを変更したときに値やテキストを取得するコード

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <meta charset="utf-8" /> 
    <title>Kendo UI Snippet</title> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css"> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <%--<input id="autocomplete" /> 
--%>  <<asp:DropDownList ID="autocomplete" runat="server" ClientIDMode="Static"> 
     </asp:DropDownList> 

    </div> 
    </form> 
    <script type="text/javascript"> 
     $(function() { 
      var data = [ 
       { id: 1, name: "Apples" }, 
       { id: 2, name: "Oranges" } 
      ]; 
      $("#autocomplete").kendoAutoComplete({ 
       dataTextField: "name", // The widget is bound to the "name" field 
       dataSource: data 
      }); 
      $('#autocomplete').on('change', function() { 
       var autoCompleteValue = $('#autocomplete').val(); 
       var autoCompleteText = $('#autocomplete').text(); 
       alert(autoCompleteValue + '->' + autoCompleteText); 
      }); 

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

ある

autoCompleteValue = "1"; 
autoCompleteText = "Apples";

出典

2016-04-24 syed mhamudul hasan akash

あなたは少し修正することができますソリューションを実現するコード：

<input id="autocomplete" /> 
<div id="result"></div> 

$("#autocomplete").kendoAutoComplete({ 
    dataTextField: "name", 
    select: function(e) { 
     var dataItem = this.dataItem(e.item.index());    
     //output selected dataItem 
     $("#result").html(kendo.stringify(dataItem)); // Bind html to see your selected text and value  
    }, 
    dataSource: { 
     data: [ 
      { name: "Apples", value: 1 }, 
      { name: "Oranges", value: 2 }, 
      { name: "Bananas", value: 3 }, 
      { name: "Mangos", value: 4 } 
     ] 
    } 
});

出典

2016-04-24 09:28:05

作品完全.Can。私は** a **と言っています**私は** a **をバックグラウンドに送り、** a **に従ってデータをフェッチし、それをオートコンプリートにバインドするajaxリクエストを呼び出します。可能であれば別の答えを与えてください –

次のようにあなたのデータソースとオートコンプリートの機能を変更する必要があります：あなたは私だけが検索結果に基づいて、AJAXリクエストを送信するために役立つ

var items = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url  : "/Home/GetItems", 
      type : "POST", 
      dataType: "json" 
     } 
    }, 
    schema : { 
     model: { 
      id : "id", 
      fields: { 
       id : { type: "id" }, 
       name: { type: "string" } 
      } 
     } 
    } 
}); 

var autoComplete = $("#autocomplete").kendoAutoComplete({ 
    minLength  : 3, 
    separator  : ", ", 
    dataSource  : items, 
    serverFiltering: true, 
    dataTextField : "name" 
}).data("kendoAutoComplete");

出典

2016-04-24 10:33:04

私は渡しているパラメータは何ですか？ –

輸送：{ 読む：{ URL： "/ホーム/のgetItems"、タイプ： "POST"、データ型： "JSON" }、なparameterMap：機能（）{ 返り{値：$（ "＃データ（ "kendoAutoComplete"）。値（）}; } } } –

ありがとう@ Samyukta R. ITは完璧に動作します –

テロリックオートコンプリートのドロップダウンリスト値とテキスト

答えて

関連する問題