ジェネリック（再利用可能）JavaScriptオートコンプリート関数の作成方法

Question

多くの皆さんの助けを借りて、JavaScriptオートコンプリート機能が動作するようになりました。今私は関数を再利用可能にしたい。以下に示すように、関数の各インスタンスに3つの変数を指定する必要があります。私がどのように行うか分からないのは、これらの3つの変数の異なる値でこの関数をインスタンス化することです。ここで

は私の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が近かったです。私が今朝働いた解決策は、タグの後

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

とWebページ上で、：：

ウェブページ

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

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