Ajax AutoComplete for jQuery

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields.

It is built with focus on performance. Results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root.

<style type="text/css">
.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
.autocomplete strong { font-weight:normal; color:#3399FF; }
</style>
<script type="text/javascript" src="http://www.devbridge.com/projects/autocomplete/jquery/local/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.devbridge.com/projects/autocomplete/jquery/local/scripts/jquery.autocomplete.js"></script>
<p>Ajax autosuggest sample (start typing country name):</p>
<form action="default.aspx" onsubmit="alert('Submit Form Event'); return false;">
  <div id="selection"></div>
  <input type="text" name="q" id="query" />
  <input type="button" value="OK" />
</form>
  //<![CDATA[

  jQuery(function() {

    var onAutocompleteSelect = function(value, data) {
      $('#selection').html('<img src="\/global\/flags\/small\/' + data + '.png" alt="" \/> ' + value);
      //alert(data);
    }

    var options = {
      serviceUrl: 'http://www.devbridge.com/projects/autocomplete/service/autocomplete.ashx',
      width: 300,
      delimiter: /(,|;)\s*/,
      onSelect: onAutocompleteSelect,
      deferRequestBy: 0, //miliseconds
      params: { country: 'Yes' },
      noCache: false //set to true, to disable caching
    };

    a = $('#query').autocomplete(options);

    $('#navigation a').each(function() {
      $(this).click(function(e) {
        var element = $(this).attr('href');
        $('html').animate({ scrollTop: $(element).offset().top }, 300, null, function() { document.location = element; });
        e.preventDefault();
      });
    });

  });

//]]>

http://www.devbridge.com/projects/autocomplete/jquery/#demo

Leave a Reply