我如何实现自动完成文本框使用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); 
     }