我如何實現自動完成文本框使用asp.net mvc，javascript，緩存，ajax

Question

我需要實現自動完成文本框，使用Asp.Net MVC3從數據庫（服務器）獲取值，使用JavaScript而不是與jQuery。所以請嘗試幫助我與源代碼。

我正在使用ASP.Net MVC3。

Answer 1

爲此有jquery自動完成在那裏。 http://docs.jquery.com/Plugins/Autocomplete 你需要做的只是寫一個jQuery代碼。 假設這是您的查看頁面中的文本框。

< INPUT TYPE = 「文本」 ID = 「自動完成」 的值= 「」/>

寫此文字框一個jquery。

$(document).ready(function() { 
     $("#AutoComplete").keypress(function() { 
      var title = $("#AutoComplete").val(); 
      var availableTags = []; 
      if (title.length == 3) { 
       $.get("/Wk/GetTitle/" + title, function (data) { 
        var arr = jQuery.makeArray(data.split(',')); 
        for (var i = 0; i < arr.length; i++) { 
         availableTags.push(arr[i]); 
        } 
        $("#AutoComplete").autocomplete({ 
         source: availableTags 
        }); 

// $（ 「＃自動完成」）選擇（）。 }）;

  } 
     }); 
    }); 

這將使用ajax調用操作方法，並且此操作方法返回要顯示的列表。 這裏得到的標題是動作方法。 控制器動作代碼是

 [HttpGet] 
    public StringBuilder GetTitle(string inputString) 
    { 
     StringBuilder sb = new StringBuilder(); 
     List<string> title = new List<string>(); 
     int i = 0; 
     string slug = RouteData.Values.Values.ElementAt(2).ToString(); 
     title = pageBL.GetTitleAutocomplete(slug); 

     for (i = 0; i <= title.Count - 1; i++) 
     { 
      if (i != title.Count -1) 
       sb = sb.Append(title.ElementAt(i) + ","); 
      else 
       sb = sb.Append(title.ElementAt(i)); 
     } 
     return sb; 
    } 

此代碼將幫助您 問我，如果你得到任何概率

Answer 2

在View： -

<input type="text" id="txtRemark" name="txtRemark" class="form-control" placeholder="Remark"> 


<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<script> 

$(document).ready(function() { 
$("#txtRemark").autocomplete({  
       source: function (request, response) { 
        $.ajax({ 
         url: "/ControllerName/AutoCompleteRemark", 
         type: "POST", 
         dataType: "json", 
         data: { remark: request.term }, 
         success: function (data) { 
          response($.map(data, function (item) { 
           return { label: item.VCEHRemark, value: item.VCEHRemark }; 
          })) 
         } 
        }) 
       }, 
       messages: { 
        noResults: "", results: "" 
       } 
      }); 

}）

In Controller： -

public JsonResult AutoCompleteRemark(string remark) 
     { 
      var result = db.tablename.Where(p => p.VCEHRemark.Contains(remark)).Select(p => new { p.VCEHRemark }); 
      return Json(result, JsonRequestBehavior.AllowGet); 
     }