Find solution
How to create dynamic function in javascript?

How to create generic (reusable) JavaScript autocomplete function

  • I now have a working JavaScript autocomplete function, thanks to help from many of you. Now I want to make the function reusable. There are three variables that need to be specified for each instance of the function, as shown below. What I don't know how to do is instantiate this function with different values for these three vars. Here is my HTML field: <div class="ui-widget"> Text or Value: <input type="text" id="dotmatch" /> </div> And here is the JavaScript code which I want to keep in its 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; } }); });

  • Answer:

    insin was close. The solution I worked out this 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 the web page: <div id="AutoSuggest"> DOT Job Title or Number: <input type="text" id="dotmatch" style="width:300px;" /> </div> And on the web page, after the tag: <script type="text/javascript" src="js/DOTAutocomplete.js"></script> <script type="text/javascript"> $(function() { AutoComplete("dotmatch", "dotnumber", "/AutoSuggestJSTest/AutoSuggest.asmx/DOTList"); }); </script>

Bob Jones at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

It looks like you're using jQuery, so you might want to http://docs.jquery.com/Plugins/Authoring. (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); Usage: $("#dotmatch").bobsAutocomplete("dotnumber", "/AutoSuggestJSTest/AutoSuggest.asmx/DOTList");

insin

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.