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

相关文章:

1、使用jQuery提高网页JS开发效率
https://www.onexin.net/improve-page-using-jquery-js-development-efficiency/

2、取代jQuery使用JavaScript标准语法
https://www.onexin.net/replace-the-jquery-javascript-standard-syntax/

3、jQuery兼容DISCUZ!系列产品权威指南
https://www.onexin.net/jquery-compatible-discuz-series-the-definitive-guide/

4、jQuery表单插件jquery.form.js用法详解
https://www.onexin.net/jquery-the-form-plugin-jquery-form-js-usage-detailed/

5、11 Multi-touch and Touch events Javascript libraries
https://www.onexin.net/11-multi-touch-and-touch-events-javascript-libraries/

转载请注明出处:https://www.onexin.net/ajax-autocomplete-for-jquery/

Leave a Reply

Your email address will not be published. Required fields are marked *