Drop-Down-Liste Wert und Text in Teleric Autocomplete

Ich habe eine Dropdown-Liste mit einfachen Auto vervollständigen von Teleric UI.Ich möchte einfach Text und Wert von Dropdown-Liste von jQuery.But es funktioniert nicht. Hier ist der CodeDrop-Down-Liste Wert und Text in Teleric Autocomplete

<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>

Ich möchte Wert und Text erhalten, wenn ich die Drop-Down-list.say ändern wählen i Äpfel

ich will

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

Quelle

2016-04-24 syed mhamudul hasan akash

Sie können leicht ändern Sie Ihre Code, um Ihre Lösung zu erreichen:

<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 } 
     ] 
    } 
});

Quelle

2016-04-24 09:28:05

funktioniert perfekt .Can Sie mir nur helfen, auf Suchergebnis basierend Ajax-Anforderung zu senden. sag ich drücke ** a ** ich werde eine ajax-anfrage anrufen um ** a ** an den hintergrund zu schicken und daten nach ** a ** abzurufen und an autocomplete zu binden. Wenn möglich, geben Sie bitte eine andere Antwort –

Möglicherweise müssen Sie Ihre Datasource und automatische Vervollständigung Funktionen wie folgt ändern:

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");

Quelle

2016-04-24 10:33:04

Was ist der Parameter, den ich übergebe? –

Transport: { Lese: { url: "/ Home/GetItems", Typ: "POST", datatype: "json" }, parameterMap: function() { return {Wert: $ ("# Autocomplete "). data (" kendoAutoComplete "). value()}; } } } –

Dank @Samyukta R. IT funktioniert perfekt –

Drop-Down-Liste Wert und Text in Teleric Autocomplete

Antwort

Verwandte Themen