Как заставить работать обработчик события результата автозаполнения Jquery? - PullRequest
Новая
       7

Как заставить работать обработчик события результата автозаполнения Jquery?

3 голосов
/ 21 сентября 2009

Я написал код, который не использует автозаполнение JQuery для запуска функции результата после того, как пользователь выберет что-то допустимое (ниже).

Под результатом я подразумеваю обработчик результатов, функцию, которая запускается после того, как в плагине автозаполнения происходит удачный выбор. Документировано здесь .

В моем случае у меня есть форма, которая на самом деле представляет собой таблицу, в которой каждая строка одинакова, за исключением уникальных идентификаторов полей: Item1, Qty1, Desc1, затем Item2, Qty2, Desc2 и т. Д. Когда пользователь вводит код Item1, текст Desc1 должен отображать английский язык выбранного кода элемента (Item2 -> Desc2 и т. Д.).

Я использовал этот код, чтобы найти все входы Item и добавить к нему автозаполнение. Обработчик события результата по какой-то причине не срабатывает. Если вы заметили, я жестко закодировал выбор «Item1», потому что я не понял, как выбрать соответствующий Desc для Item, где Item1 -> Desc1, Item2 -> Desc2 и т. Д.

Я использовал MVC Url.Content только потому, что мне это удалось. Кто-то использовал Url.Action, что, на мой взгляд, лучше, просто надо разобраться.

Не стесняйтесь корректировать мое использование по мере необходимости, я впервые использую ASP.NET MVC / JQuery.

Спасибо:)

код: 

$(document).ready(function(){

  $("input[id^='Item']").autocomplete( "<%= Url.Content("~/products/autocomplete")%>", {
  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].name, result:data[i].id }; }
      return rows;
  },
  formatItem: function(row, i, n) {
            return row.id + ' - ' + row.name;
        },
  selectFirst: true,
  //autoFill: true,
  minChars: 2,
  max: 30,
  autoFill: true,
  mustMatch: true,
  matchContains: false,
  scrollHeight: 100,
  width: 300,
  cacheLength: 1,
  scroll: true
  });

  $("Item1").result(function(event, data, formatted) {
      $("Desc1").html( !data ? "No match!" : "Selected: " + formatted);
  });
});

1 Ответ

7 голосов
/ 23 сентября 2009 
$(document).ready(function(){

    $("input[id^='Item']").autocomplete( "<%= Url.Content("~/products/autocomplete")%>", {
            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].name, result:data[i].id }; }
                return rows;
            },
            formatItem: function(row, i, n) {
                return row.id + ' - ' + row.name;
            },
            selectFirst: true,
            //autoFill: true,
            minChars: 2,
            max: 30,
            autoFill: true,
            mustMatch: true,
            matchContains: false,
            scrollHeight: 100,
            width: 300,
            cacheLength: 1,
            scroll: true
    }).result(function(event, data, formatted) {
        var n = $(this).attr("id").match(/\d+/);
        var b = $("span[id='Desc"+n+"']")
        b.html( !data ? "No match!" : "Selected: " + formatted);
    });
});
...