Wie generische (wiederverwendbare) JavaScript-Autocomplete-Funktion erstellen

Question

Ich habe jetzt eine funktionierende JavaScript-Autocomplete-Funktion, dank der Hilfe von vielen von Ihnen. Jetzt möchte ich die Funktion wiederverwendbar machen. Es gibt drei Variablen, die für jede Instanz der Funktion angegeben werden müssen, wie unten gezeigt. Was ich nicht tun kann, ist diese Funktion mit verschiedenen Werten für diese drei Variablen zu instanziieren.

Hier ist mein HTML-Feld:

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

Und hier ist der JavaScript-Code, den ich in seinem eigenen Js behalten wollen Datei:

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 nahe war. Die Lösung, die ich heute Morgen ausgearbeitet habe, ist:

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

Auf der Webseite:

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

Und auf der Webseite nach dem tag:

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

<script type="text/javascript"> 
    $(function() { 
     AutoComplete("dotmatch", "dotnumber", "/AutoSuggestJSTest/AutoSuggest.asmx/DOTList"); 
    }); 
</script> 

Answer 2

Es sieht so aus, als ob Sie jQuery verwenden, also möchten Sie vielleicht 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); 

Verbrauch:

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