How to create generic (reusable) JavaScript autocomplete function -
i have working javascript autocomplete function, many of you. want make function reusable. there 3 variables need specified each instance of function, shown below. don't know how instantiate function different values these 3 vars.
here html field:
<div class="ui-widget"> text or value: <input type="text" id="dotmatch" /> </div> and here javascript code want keep in own .js file:
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; } }); });
insin close. solution worked out morning is;
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); } }); } on web page:
<div id="autosuggest"> dot job title or number: <input type="text" id="dotmatch" style="width:300px;" /> </div> and on web page, after tag:
<script type="text/javascript" src="js/dotautocomplete.js"></script> <script type="text/javascript"> $(function() { autocomplete("dotmatch", "dotnumber", "/autosuggestjstest/autosuggest.asmx/dotlist"); }); </script>
Comments
Post a Comment