Bootstrap Search Suggest 插件使用

  • A+
所属分类:MVC

Bootstrap Search Suggest 插件使用

Bootstrap 搜索建议插件

Controllers

  1. public ActionResult Index()  
  2.         {  
  3.             YuXi();  
  4.             return View();  
  5.         }  
  6.         public void YuXi()  
  7.         {  
  8.             var query = from a in entities.CESHI  
  9.                         select new  
  10.                         {  
  11.                             ID=a.ID,  
  12.                             NEIRONG = a.NEIRONG,  
  13.                             REMARK01 = a.REMARK01  
  14.                         };  
  15.             JavaScriptSerializer jss = new JavaScriptSerializer();  
  16.             ViewData["Json"] = jss.Serialize(query.ToList());  
  17.         }  

Views

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta name="viewport" content="width=device-width" />  
  5.     <title>Index</title>  
  6.     <script src="~/Content/js/jquery.min.js"></script>  
  7.     <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />  
  8.     <script src="~/Content/js/bootstrap.min.js"></script>  
  9.     <script src="~/Content/js/plugins/suggest/bootstrap-suggest.min.js"></script>  
  10. </head>  
  11. <body>  
  12.     <div>  
  13.     <div class="row">  
  14.     <div class="col-sm-6">  
  15.     <div class="form-group">  
  16.     <label>Suggest演示 *</label>  
  17.     <div class="input-group">  
  18.     <input type="text" class="form-control required" id="test_data" name="test_data">  
  19.     <div class="input-group-btn">  
  20.     <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">  
  21.     <span class="caret"></span>  
  22.     </button>  
  23.     <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>  
  24.     </div>  
  25.     </div>  
  26.     </div>  
  27.     </div>  
  28.     </div>  
  29.     </div>  
  30.     <script>  
  31.       var testdataBsSuggest = $("#test_data").bsSuggest  
  32.         ({  
  33.             indexId:0,  
  34.             indexKey:1,  
  35.             data: {  
  36.                 "value":@Html.Raw(HttpUtility.UrlDecode(@ViewData["Json"].ToString())),  
  37.             }  
  38.         });  
  39.     </script>  
  40. </body>  
  41. </html>  

效果图

Bootstrap Search Suggest 插件使用
[dltable file="Suggest用到的JS+CSS" size="245KB"]http://pan.baidu.com/s/1i5LRYV7[/dltable]

钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: