Asp.net mvc 4的可搜索下拉列表

-2

我試圖實現可搜索的下拉列表。我找到了下面的鏈接並試圖執行相同的操作。Asp.net mvc 4的可搜索下拉列表

http://developmentpassion.blogspot.in/2014/01/searchable-dropdown-in-aspnet-mvc-4.html

我能夠獲得下拉而不是搜索。

有人可以幫助我如何獲得ASP.NET MVC中的可搜索下拉列表？

感謝，巴魯

來源

2016-06-21 Balanjaneyulu K

「Chosen」似乎是一個很好的解決方案。它也不是特別依賴於ASP.NET MVC，但可用於任何Web技術。你有沒有包含相應的JS文件？ – Marcel

請顯示一些您的相關代碼。 – Marcel

嗨Marcel，我已經包含了相關的JS文件，下面是我的代碼。 –

我能夠使用

<script src="@Url.Content("~/Scripts/CustomsSelect/jquery-customselect.js")" type="text/javascript"></script> 

$(function() { 
    $("#Group_Country").change(function() { 
     var options = {}; 

     options.url = "/Admin/GetCity"; 
     options.type = "POST"; 
     options.data = JSON.stringify({ country: $("#Group_Country").val() }); 
     options.dataType = "json"; 
     options.contentType = "application/json"; 
     options.success = function (data) { 
      $("#Group_City").empty(); 
      for (var i = 0; i < data.length; i++) { 
       var opt = data[i].split('-'); 
       $("#Group_City").append("<option value=" + opt[0] + ">" + opt[1] + "</option>"); 
      } 
      $("#Group_City").customselect("destroy"); // this is the binding mechanisam 
      $("#Group_City").customselect(); // this is the binding mechanisam 
     }; 
     options.error = function() { $("#Group_Country").focus(); }; 
     $.ajax(options); 

    }); 


@Html.DropDownListFor(model => model.Group_City, list, new { @class = "custom-select" })

這個是整個過程做到這一點我用來實現搜索下拉

來源

2016-06-21 06:14:52

嗨，Arun，感謝您的評論。但是，我沒有調用任何AJAX服務來獲取數據。我會傳遞來自控制器的數據來查看。您可以查看鏈接：https://drive.google.com/open?id=0B1Z7d8OTSWR4YWdXa1ZIX3lYcEU –

您可以隨意修改它，如果您有大量數據，則不需要所有數據首先加載，這是一個整體 –

使用，請在下面找到解決給定bootstrap和jquery，可以稍後使用asp.net動態實現

http://codepen.io/Rio517/pen/NPLbpP

<div class="container"> 
<div class="row"> 
    <h2>Bootstrap-select example</h2> 
    <p>This uses <a href="http://silviomoreto.github.io/bootstrap-select/">http://silviomoreto.github.io/bootstrap-select/</a></p> 
    <hr /> 
</div> 

<div class="row-fluid"> 
    <select class="selectpicker" data-show-subtext="true" data-live-search="true"> 
    <option data-subtext="Rep California">Tom Foolery</option> 
    <option data-subtext="Sen California">Bill Gordon</option> 
    <option data-subtext="Sen Massacusetts">Elizabeth Warren</option> 
    <option data-subtext="Rep Alabama">Mario Flores</option> 
    <option data-subtext="Rep Alaska">Don Young</option> 
    <option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option> 
    </select> 
    <span class="help-inline">With <code>data-show-subtext="true" data-live-search="true"</code>. Try searching for california</span> 
</div>

中使用的庫的列表..

//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css //cdnjs.cloudflare .com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js //cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js /bootstrap-select.min.js

來源

2016-06-21 06:21:06

爲了更好的理解你也可以參考https://jsfiddle.net/KyleMit/9abm0hhy/ –

謝謝Gurmeet Singh。我會盡我所能讓你知道。 –

@Balu沒問題，讓我知道你是否面臨任何問題 –

Asp.net mvc 4的可搜索下拉列表

回答

相關問題