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

Question

Теперь у меня есть рабочая функция автозаполнения 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; 
    } 
}); 

});

Answer 1

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

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> 

Answer 2

Похоже, вы используете jQuery, поэтому можете захотеть implement it as a plugin.

(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");