基于prototype的输入自动提示autocomplete

对老外的加了修改，对中文的支持和条数的显示

原作者地址： http://www.devbridge.com/projects/autocomplete/

 

效果：

 autocomplete.jsView Code

 

var Autocomplete = function(el, options){
  this.el = $(el);
  this.id = this.el.identify();
  this.el.setAttribute('autocomplete','off');
  this.suggestions = [];
  this.data = [];
  this.badQueries = [];
  this.selectedIndex = -1;
  this.currentValue = this.el.value;
  this.intervalId = 0;
  this.cachedResponse = [];
  this.instanceId = null;
  this.onChangeInterval = null;
  this.ignoreValueChange = false;
  this.serviceUrl = options.serviceUrl;
  this.numbers = [];//条数
  this.options = {
    autoSubmit:false,
    minChars:1,
    maxHeight:300,
    deferRequestBy:0,
    width:0,
    showNumber:true, //是否显示条数
    container:null
  };
  if(options){ Object.extend(this.options, options); }
  if(Autocomplete.isDomLoaded){
    this.initialize();
  }else{
    Event.observe(document, 'dom:loaded', this.initialize.bind(this), false);
  }
};

Autocomplete.instances = [];
Autocomplete.isDomLoaded = false;

Autocomplete.getInstance = function(id){
  var instances = Autocomplete.instances;
  var i = instances.length;
  while(i--){ if(instances[i].id === id){ return instances[i]; }}
};

Autocomplete.highlight = function(value, re){
  return value.replace(re, function(match){ return '<strong>' + match + '<\/strong>' });
};

Autocomplete.prototype = {

  killerFn: null,

  initialize: function() {
    var me = this;
    this.killerFn = function(e) {
      if (!$(Event.element(e)).up('.autocomplete')) {
        me.killSuggestions();
        me.disableKillerFn();
      }
    } .bindAsEventListener(this);

    if (!this.options.width) { this.options.width = this.el.getWidth(); }

    var div = new Element('div', { style: 'position:absolute;' });
    div.update('<div class="autocomplete-w1"><div class="autocomplete-w2"><div class="autocomplete" >

 

使用：Event.observe(window, 'load', function() {

    function onAutocompleteSelect(value, data){
            //..
    }
    var rand = new Date().getTime();
    var url = 'data.js?r=' + rand;
    new Autocomplete('txtEmployeeNum', { 
        serviceUrl: url, 
        width: 300,  //可选
        onSelect: onAutocompleteSelect, //可选
        showNumber: true //显示条数
        //container: 'ac_container'  //可选
    });
});

<input type="text" name="q" id="txtEmployeeNum" />
<!-- <div id="ac_container"></div>  -->  

 

data.js 有后台控制，产生json格式数据，如下：

 

//{query:'z',suggestions:['z','z1','z2','z3']}

//{query:'q',suggestions:['q','q1','q2','q3'],numbers:[99,88,77,66]}

{query:'去',suggestions:['去','去1','去12','去123'],numbers:[99,88,77,66]}

 

弹出提示层的原型：View Code

 

<div class="autocomplete-w1">
  <div class="autocomplete-w2">
    <div style="width:299px;" id="Autocomplete_query" class="autocomplete">
      <div class="selected"><strong>Li</strong>thuania<span class="number">约88个服务</span></div>
    </div>
  </div>
</div

 

 css控制样式自己控制：View Code

 

.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:4px; left:3px; /* IE6 fix: */ _background:none; _top:1px; }
.autocomplete { width:300px; border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE specific: */ _height:350px;  _margin:0px 6px 6px 0; overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; }
.autocomplete strong { font-weight:normal; color:#3399FF; }
.autocomplete .number { font-weight:normal; color:red;