Как создать универсальную (многоразовую) функцию автозаполнения JavaScript - PullRequest
Новая
       10

Как создать универсальную (многоразовую) функцию автозаполнения JavaScript

2 голосов
/ 03 декабря 2010

Теперь у меня есть работающая функция автозаполнения JavaScript, благодаря помощи многих из вас. Теперь я хочу сделать функцию многоразовой. Для каждого экземпляра функции необходимо указать три переменные, как показано ниже. Чего я не знаю, как это сделать - создать экземпляр этой функции с разными значениями для этих трех переменных.

Вот мое поле HTML: 

<div class="ui-widget">
    Text or Value:
    <input type="text" id="dotmatch" />
</div>

А вот код JavaScript, который я хочу сохранить в своем собственном файле .js: 

var matchFieldName = 'dotmatch';
var resultFieldName = 'dotnumber';
var lookupURL = "/AutoSuggestJSTest/AutoSuggest.asmx/DOTList";

$(function() {
$('#' + matchFieldName).autocomplete({
    source: function(request, response) {
        $.ajax({
            type: "POST",
            url: lookupURL,
            contentType: 'application/json',
            dataType: "json",
            data: JSON.stringify({ prefixText: request.term, count: 20 }),
            success: function(data) {
                var output = jQuery.parseJSON(data.d);
                response($.map(output, function(item) {
                    return {
                        label: item.Label + "(" + item.Value+ ")",
                        value: item.Value
                    }
                }));
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    minLength: 2,
    select: function(event, ui) {
        $('#' + resultFieldName).val(ui.item.value);
        return ui.item.label;
    }
});

});

Ответы [ 2 ]

2 голосов
/ 03 декабря 2010

Инсин был близко.Решение, которое я разработал сегодня утром: 

function AutoComplete(matchFieldName, resultFieldName, lookupURL) {
    $('#' + matchFieldName).autocomplete({
        source: function(request, response) {
            $.ajax({
                type: "POST",
                url: lookupURL,
                contentType: 'application/json',
                dataType: "json",
                data: JSON.stringify({ prefixText: request.term, count: 20 }),
                success: function(data) {
                    var output = jQuery.parseJSON(data.d);
                    response($.map(output, function(item) {
                        return {
                            value: item.Value,
                            label: (item.Label == item.Value) ? item.Label : item.Label + "(" + item.Value + ")"
                        }
                    }));
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            $('#' + resultFieldName).val(ui.item.value);
        }
    });
}

На веб-странице: 

<div id="AutoSuggest">
    DOT Job Title or Number:
    <input type="text" id="dotmatch" style="width:300px;" />
</div>

И на веб-странице после тега: 

<script type="text/javascript" src="js/DOTAutocomplete.js"></script>

<script type="text/javascript">
    $(function() {
        AutoComplete("dotmatch", "dotnumber", "/AutoSuggestJSTest/AutoSuggest.asmx/DOTList");
    });
</script>
0 голосов
/ 03 декабря 2010

Похоже, вы используете jQuery, поэтому вы можете реализовать его как плагин . 

(function($) {
  $.fn.bobsAutocomplete = function(resultFieldName, lookupURL) {
    this.autocomplete({
      source: function(request, response) {
          $.ajax({
              type: "POST",
              url: lookupURL,
              contentType: 'application/json',
              dataType: "json",
              data: JSON.stringify({prefixText: request.term, count: 20}),
              success: function(data) {
                  var output = jQuery.parseJSON(data.d);
                  response($.map(output, function(item) {
                      return {
                          label: item.Label + "(" + item.Value+ ")",
                          value: item.Value
                      }
                  }));
              },
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                  alert(textStatus);
              }
          });
      },
      minLength: 2,
      select: function(event, ui) {
          $('#' + resultFieldName).val(ui.item.value);
          return ui.item.label;
      }
    });
    return this;
  };
})(jQuery);

Использование: 

$("#dotmatch").bobsAutocomplete("dotnumber", "/AutoSuggestJSTest/AutoSuggest.asmx/DOTList");
...