如何實現自動完成文本框在MVC

Question

我對着在自動填充文本框中聖維特硬編碼數據的問題，我的JSON「搜索」的方法不火我已經查了很多代碼落實到我的項目，但沒有得到任何成功了。我不知道問題在哪裏。好心幫我thankx提前

Model:

public class Locations 
    { 

     public int Id { get; set; } 
     public string Name { get; set; } 

    } 

Controller:

public JsonResult Search(string query) 
     { 
      List<Locations> locations = new List<Locations>() 
     { 
      new Locations() {Id = 1, Name = "London"}, 
      new Locations() {Id = 2, Name = "Walles"}, 
      new Locations() {Id = 3, Name = "Birmingham"}, 
      new Locations() {Id = 4, Name = "Edinburgh"}, 
      new Locations() {Id = 5, Name = "Glasgow"}, 
      new Locations() {Id = 6, Name = "Liverpool"}, 
      new Locations() {Id = 7, Name = "Bristol"}, 
      new Locations() {Id = 8, Name = "Manchester"}, 
      new Locations() {Id = 9, Name = "NewCastle"}, 
      new Locations() {Id = 10, Name = "Leeds"}, 
      new Locations() {Id = 11, Name = "Sheffield"}, 
      new Locations() {Id = 12, Name = "Nottingham"}, 
      new Locations() {Id = 13, Name = "Cardif"}, 
      new Locations() {Id = 14, Name = "Cambridge"}, 
      new Locations() {Id = 15, Name = "Bradford"}, 
      new Locations() {Id = 16, Name = "Kingston Upon Hall"}, 
      new Locations() {Id = 17, Name = "Norwich"}, 
      new Locations() {Id = 18, Name = "Conventory"} 

      }; 
      List<string> Loc; 
      Loc = locations.Where(x => x.Name.StartsWith(query.ToLower())).Select(x => x.Name).ToList(); 
      return Json(Loc, JsonRequestBehavior.AllowGet); 
     } 

View:

@model IEnumerable<SearchBox.Models.Locations> 
@using SearchBox.Models 
@{ 
    ViewBag.Title = "Index"; 
} 

<link href="~/Content/Autocomplete/jquery-ui.css" rel="stylesheet" /> 
<script src="~/Content/Autocomplete/jquery-ui.js"></script> 
<link href="~/Content/Autocomplete/jquery-ui.theme.css" rel="stylesheet" /> 

<script type="text/javascript"> 
    $("#tags").autocomplete({ 
     source: '@Url.Action("Search")' 
    }); 
</script> 

    <input type="text" id="tags" /> 

Answer 1

你需要做的，而不是僅僅通過在URL數據源Ajax請求。

<link href="~/Content/jquery-ui.css" rel="stylesheet" /> 
<script src="~/Content/jquery-1.12.4.js"></script> 
<script src="~/Content/jquery-ui.js"></script> 

<input type="text" id="tags" /> 

<script type="text/javascript"> 
    $("#tags").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: '@Url.Action("Search")', 
       dataType: "jsonp", 
       data: { 
        term: request.term 
       }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
          label: item.Name, 
          value: item.Id 
         }; 
        })); 
       } 
      }); 
     }, 
     minLength: 2, 
     select: function (event, ui) { 

     } 
    }); 
</script> 

查看如何使用autocomplete with ajax request。

Answer 2

我已經在我的項目中實現了這一點。請檢查您是否可以利用它

<div class="tag_cover" style="margin-top:60px; margin-left:57px"> 
<input type="text" style="width:300px; display:inline-block; border:transparent" class="tag_input brzero has-icon" id="SkillSet" list="json-datalist" placeholder="Employee name or Skills"> 
<datalist id="json-datalist"></datalist>  
</div> 

JQuery的：

$(".tag_input").keyup(function (e) { 
     var type = $("input[name='search']:checked").val(); 
     if (type == "Name") { 
      var sString = $("#SkillSet").val(); 
      if (sString == null || sString == "") { 
       e.preventDefault(); 
      } 
      else { 
       $.ajax({ 
        url: "@Url.Action("GetEmployeeNameByKeyword","Home")", 
        type: "POST", 
        data: { 'SearchedString': sString }, 
        dataType: "json", 
        success: function (data) { 
         if (data == null || data == "") { 
          //alert("no skills found"); 
         } 
         else { 
          var dataList = document.getElementById('json-datalist'); 
          $(dataList).empty(); 
          $.each(data, function (key, value) { 
           $(dataList).append($('<option>').text(value.UserNames.trim()).attr("value", value.UserId)); 
          }); 
         } 
        }, 
        error: function() { 
         alert("failure"); 
        } 
       }); 
      } 
     } 
    } 

控制器：

public JsonResult GetEmployeeNameByKeyword(string SearchedString) 
    { 
     List<UserProfile> EmployeeNames = new List<UserProfile>(); 
     EmployeeNames = _db.UserProfiles.Where(i => i.UserNames.Contains(SearchedString)).ToList(); 
     return Json(EmployeeNames, JsonRequestBehavior.AllowGet); 
    }