How to create generic (reusable) JavaScript autocomplete function

Question

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

});

Cymbals · Accepted Answer · 2011-11-30 16:13:44Z

2

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>

edited Nov 30, 2011 at 16:13

Cymbals

1,1741 gold badge14 silver badges26 bronze badges

answered Dec 3, 2010 at 20:51

Bob Jones

2,0485 gold badges35 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cymbals Over a year ago

I'm trying to add .data( "autocomplete" ) to this. If you can assist, please see: stackoverflow.com/questions/8330096/…

Jonny Buchanan · Accepted Answer · 2010-12-02 23:08:49Z

0

It looks like you're using jQuery, so you might want to 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);

Usage:

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

answered Dec 2, 2010 at 23:08

Jonny Buchanan

62.9k17 gold badges147 silver badges150 bronze badges

1 Comment

Bob Jones Over a year ago

Can you give me a bit more of a clue about the usage? What I would like to see is two instances. My current instance looks like: <div class="ui-widget"> Text or Value: <input type="text" id="dotmatch" /> $("#dotmatch").bobsAutocomplete </div> <hr /> Result Value:<input type="text" id="dotnumber" style="width: 100px" />

Collectives™ on Stack Overflow

How to create generic (reusable) JavaScript autocomplete function

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related