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

Popular posts from this blog

400 Bad Request on Apache/PHP AddHandler wrapper -

Add email recipient to all new Trac tickets -

php - Change action and image src url's with jQuery -