如何創建通用（可重複使用）的JavaScript自動填充功能

Question

我現在有一個可用的JavaScript自動填充功能，這要感謝你們許多人的幫助。現在我想讓這個功能可以重用。如下所示，需要爲函數的每個實例指定三個變量。我不知道該怎麼做的是用這些變量的不同值來實例化這個函數。

這裏是我的HTML場：

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

，這裏是我想繼續在自己的.js的JavaScript代碼文件中：

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