asp.net-mvc - jQuery オートコンプリートが完全に応答しない

Question

ASP MVC3 イントラネット アプリで jQuery を本格的に掘り下げたのはこれが初めてです。データベースからアイテムのリストを参照できるようにするには、オートコンプリートが必要です。私はここにあるチュートリアルに従って、「わかりました、それは簡単に見える」と思いました...そして今、コードを実装し、他の方法を調査し、少なくとも4時間キーボードに頭をぶつけた後、私はこの仕事をするのにどこにも近づいていませんコードを書く前に。

これは、ビューからのコードであり、ライブラリ宣言も含まれています。参考までに - 私はこのプロジェクトを引き継いでいるので、他のすべての javascript/Ajax は、私よりも経験豊富な誰かによって書かれています。他の何かが邪魔になる場合に備えて、すべてのコードをこのセクションに入れました。

<link href="../../Content/jquery-ui-1.9.2.custom.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">

    $(function () {
       $("#BankName").autocomplete({
          source: '@Url.Action("GetBanks", "AgentTransmission")',
          minLength: 1
    });

    $(function () {
        $("#drpProducerType").change(function () {
            var value = $(this).val();
            if (value == "SoleProprietor") {
                $("#Role").val(value);
                $('#DSSfields').removeClass('noSee');
                $('#DSSfields').addClass('seeMe');
                //alert("Role must be set to \"Sole Proprietor\" as well. Monet will do this for you!");
            }
            else {
                //TO DO: add role stuff here as well
                $('#DSSfields').removeClass('seeMe');
                $('#DSSfields').addClass('noSee');
            }

        });
        $("#Role").change(function () {
            var value = $(this).val();
            if (value == "SoleProprietor") {
                $("#drpProducerType").val(value);
                alert("Producer Type changed to \"Sole Proprietor\" as well");
            }

        });
    });


    function ChangeChannel() {
        //this function called if Market Segment changes, to update the channel
        var pendistcode = document.getElementById('Pendist');
        if (pendistcode == null) alert('Error: Cannot find Market Segment control');

        $.ajax({
            type: 'POST',
            url: '/AgentTransmission/GetChannel/',
            data: { pendist: pendistcode.value },
            success: function (data) {
                //                alert("success: " + data);
                $('#channelName').html(data);
                $('#Channel').val(data);
            },
            error: function (data) {
                alert("failure to obtain Channel name");
            }
        });

        CheckTerritory('channel');

    } //end ChangeChannel

    function CheckTerritory(category) {
        //this function called when changes happen that could change the territory (inddist)

        //if the channel changed, or the alignment indicator, update the Territory
        if ((category == "channel") | (category == "align")) UpdateTerritory();

        //only trigger if the state or zip changed on the aligned address 
        if ((category == "L") && ($('#AlignmentL').attr('checked'))) UpdateTerritory();
        if ((category == "M") && ($('#AlignmentM').attr('checked'))) UpdateTerritory();

    } //end CheckTerritory

    function UpdateTerritory() {

        var i = $('#INDDist').val();
        var p = $('#Pendist').val();
       // alert(":" + i + ":" + p + ":");

        //if ((i == "") || (p == "")) return;
        if (p == "") return;

        if ($('#INDDist').val() == "864") {
            $('#INDDist').val("701");
        }
        else {
            if ($('#INDDist').val() == "") {
                $('#INDDist').val("864");
            }
        }
    } //end UpdateTerritory

    function MoreCompanies(row) {
        //if the user clicks on the plus sign, add more company rows
        if (row == '3') {
            $('#plus2').html(' ');
            $('#row3').removeClass('noSee');
            $('#row3').addClass('seeMe');
        }
        if (row == '4') {
            $('#plus3').html(' ');
            $('#row4').removeClass('noSee');
            $('#row4').addClass('seeMe');
        }
        if (row == '5') {
            $('#plus4').html(' ');
            $('#row5').removeClass('noSee');
            $('#row5').addClass('seeMe');
        }

    } //end MoreCompanies

    function CompanyFields() {

    } //end CompanyFields

    function ShowHideTerritory() {
        alert('sunshine');
    } //end ShowHideTerritory

</script>

オートコンプリートが機能するテキスト ボックス

    <div class="M-editor-label">
        Bank\Agency Name
    </div>
    <div class="M-editor-field">
        @Html.TextBoxFor(model => model.BankName, new { id = "BankName" })
        @Html.ValidationMessageFor(model => model.BankName)
    </div>

これがコントローラーからのGetBanksメソッドです。このメソッドの最初の行にブレークポイントを設定しましたが、ヒットすることができませんでした。

    //GET
    public JsonResult GetBanks(string search)
    {
        var banks = from c in db.BankListMaster.Where(n => n.BankName.Contains(search))
                        select c.BankName;

        banks = banks.Distinct();

        return Json(banks, JsonRequestBehavior.AllowGet);
    }

編集

現在の.autocompleteコードを代わりにこのメソッドによって提案されたコードに置き換えると、Chrome のデバッガーで次のエラーが発生します。

Uncaught Error: cannot call methods on autocomplete prior to initialization; attempted to call method '/AgentTransmission/GetBanks'

これが新しいコードです。以前使用していたものとまったく同じ場所に配置しました。

$(document).ready( function() {
  $('#BankName').autocomplete('@Url.Action("GetBanks", "AgentTransmission")', {
      dataType: 'json',
      parse: function(data) {
          var rows = new Array();
          for(var i=0; i<data.length; i++){
              rows[i] = { data:data[i], value:data[i].BankName };
          }
          return rows;
      },
      formatItem: function(row, i, n) {
          return row.BankName + ' - ' + row.Description;
      },
      width: 300,
      mustMatch: true,
  });
});