asp.net mvcでjqueryを使用してオートコンプリートテキストボックスの問題

ASP.Net MVCアプリケーションで顧客名を入力するためのオートコンプリートテキストボックスを作成する必要があります。私の見解でjQueryのコードは次のとおりです。asp.net mvcでjqueryを使用してオートコンプリートテキストボックスの問題

$(document).ready(function() { 
    $("input#bldCustomerName").autocomplete({ 
     source: '<%= Url.Action("ListCustomers","Build") %>' 
    }); 
});

私のコントローラのアクションは次のとおりです。keypressに

public ActionResult ListCustomers(string term) 
    { 
     IList<HSTrader> lstTraders = new List<HSTrader>(); 
     Build objBld = new Build(); 
     string trdrType = Resources.Resource.TraderTypeCustomer; 
     int trdrTypeId = objBld.GetTraderTypeByTraderTypeName(trdrType).Id; 
     lstTraders = objBld.GetTradersByTraderType(trdrTypeId); 

     var results = from m in lstTraders 
         where m.TraderName.StartsWith(term) 
         select m.TraderName; //new { label = m.TraderName, id = m.Id }; 

     return Json(results.ToArray(), JsonRequestBehavior.AllowGet); 
    }

コントローラのアクションが実行されていますが、リストには、テキストボックスの下に表示されません。実装で何が問題になっていますか？これは誰かに役立ちます

出典

2011-11-24 Suja Shyam

コンソール/ Firebugでエラーが発生しましたか？ –

大丈夫です大文字小文字の区別の場合。その適切な結果を与える。 –

オートコンプリートヘルパーフォームhttp://awesome.codeplex.comをご検討ください。 – Omu

$(document).ready(function() { 
      $('input#bldCustomerName').autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: '/Build/ListCustomers', type: 'Get', dataType: 'json', 
         data: { term: request.term, maxResults: 10 }, 
         success: function (data) { 
          response($.map(data, function (item) { 
           return { label: item.TraderName, value: item.TraderName, id: item.TraderName } 

           //return { label: item.d, value: item.d, id: item.d } 
           //If it does not work then use this line. comment above line. it is for single dimension array (only one column.). 
          })) 
         } 
        }); 
       }, 
       select: function (event, ui) { 

       } 
      }); 
     }); 






     //BuildController 
     [HttpGet] 
     public JsonResult ListCustomers(string term, int maxResults) 
     { 
      IList<HSTrader> lstTraders = new List<HSTrader>(); 
      Build objBld = new Build(); 
      string trdrType = Resources.Resource.TraderTypeCustomer; 
      int trdrTypeId = objBld.GetTraderTypeByTraderTypeName(trdrType).Id; 
      lstTraders = objBld.GetTradersByTraderType(trdrTypeId); 

      var results = from m in lstTraders 
          where m.TraderName.StartsWith(term) 
          select m.TraderName; //new { label = m.TraderName, id = m.Id }; 

      return Json(results.Take(maxResults).ToList(), JsonRequestBehavior.AllowGet); 
     }

出典

2012-05-07 10:34:07 Thulasiram

希望...

は、私は、彼らはVS2013のスクリプトのテンプレートが付属していないので、jqueryの-UIライブラリとスタイルシートを追加する必要がありました。ここでは私のために働いたDBクエリとTextBoxForとオートコンプリートの例です：

WordListController.cs：

public ActionResult Test2(MyModel vm) 
{ 
    return View(vm); 
} 
public JsonResult AutoComplete(string search) 
{ 
    var result = (from r in db.Words 
        where r.Word.ToLower().StartsWith(search.ToLower()) 
        select r.Word).Take(10).ToArray(); 

    return Json(result, JsonRequestBehavior.AllowGet); 
}

Test2.cshtml：

@{ 
    ViewBag.Title = "test2"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
@Scripts.Render("~/bundles/jqueryui") 
@Styles.Render("~/Content/jqueryuicss") 

@model WLWeb.Models.MyModel 

<h2>test2</h2> 

<script> 

     $(function() { 
      $('#tags').autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: '@Url.Action("AutoComplete", "WordList")', 
         dataType: "json", 
         contentType: 'application/json, charset=utf-8', 
         data: { 
          search: $("#tags").val() 
         }, 
         success: function (data) { 

          response($.map(data, function (item) { 
           return { 
            label: item 
           }; 
          })); 
         }, 
         error: function (xhr, status, error) { 
          alert(error); 
         } 
        }); 
       }, 
       minLength: 2 
      }); 
     }); 

</script> 

    @Html.TextBoxFor(x => Model.SelectionModel.SearchString, new { @id = "tags", style = "width:120px;" })

Layout.csthml：

<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/jqueryval") 

</head> 
<body> 
... 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 
</html>

BundleConfig.cs：

... 
     bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
        "~/Scripts/jquery-ui-{version}.custom.js")); 

     bundles.Add(new StyleBundle("~/Content/jqueryuicss").Include(
        "~/Content/jquery-ui-{version}.custom.css"));

出典

2014-06-10 14:05:46

asp.net mvcでjqueryを使用してオートコンプリートテキストボックスの問題

答えて

関連する問題