Question

这是我第一次真正用我的ASP MVC3内网应用程序钻研jQuery。我需要自动完成功能才能从数据库中引用项目列表。我跟着the tutorial found here并认为“好吧，看起来很容易”......现在，在实施代码并研究其他方法并将我的头撞在键盘上至少四个小时之后我就不再接近这个了在我编写代码之前的工作。

以下是视图中的代码，以及库声明。仅供参考 - 我接手这个项目，所以你看到的所有其他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);
    }

修改

如果我使用建议的代码by this method instead替换当前的.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,
  });
});

Answer 1

我在autocomplete添加了一组额外的右括号，清除了这一点。小部件现在正常运行。

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

jQuery自动完成完全没有响应

1 个答案: