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的可搜索下拉列表

回答

相关问题