asp.net-mvc - jQuery 自动完成完全没有响应

Question

这是我第一次使用 ASP MVC3 Intranet 应用程序真正深入研究 jQuery。我需要自动完成功能才能引用数据库中的项目列表。我关注了the tutorial found here并认为“好吧，这看起来很简单”...现在，在实现代码并研究其他方法并用头敲击键盘至少四个小时之后，我离编写代码之前的工作还差得远。

这是 View 中的代码，还有库声明。仅供引用 - 我正在接管这个项目，因此您看到的所有其他 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>

这是 Controller 中的 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 代码 by this method instead ，我在 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,
  });
});

Answer 1

我在自动完成中添加了一组额外的右括号，从而解决了这个问题。该小部件现在可以正常运行。

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