jquery autocomplete

Question

function bindAjaxSchool(){
var school = $(this), form = school.closest('[regForm]');
school.autocomplete({
url: '/ajax/json!listSchools.jhtml',
ajax: 'schools',
selected: function(event, li){
$(this).val(li.text());
form.find('[name="schoolId"]').val(li.attr('index'));
},
keydown: function(event, obj){
form.find('[name="schoolId"]').val('');
}
});
}//autocomplete ajax组件
(function($) {
$.widget("ushi.autocomplete", {
options: {
widgetClass: 'ushi-autocomplete',
listContClass: '',
listClass: 'list-bottom',
hoverClass: 'hover',
listHighlightClass: 'ac-list-hl',
loadingClass: 'ac-loading',
li_template: '<li index="%1">%2</li>',
li_id: ['id_', 'name_'],
dataLoading: false,
dataList: null,
showEmptyList: false,
listMax: 15,
ajaxKey: 'q',
position: null,
emptyKey: false
}, _create: function() {
        this.KEY_UP  = 38;
        this.KEY_DOWN  = 40;
        this.KEY_ESC  = 27;
        this.KEY_RETURN = 13;
        this.KEY_TAB    = 9;
        this.CTRLKEY    = [38, 40, 27, 13, 9];        this.prevKey = null;
        this.keyTimer = null;
        this.ajaxTimer = null;
        this.showing = false;
        this.keyCancel = false; var options = this.options,
self = this;
this.element.attr('autocomplete', 'off')
.one('focus', function(event){
if( self.element.attr('searchKey') != self.element.val() ){
self.element.val(self.element.attr('searchKey'));
}
self._trigger('onefocus', event, self.element);
setTimeout(function(){
self.element.data('oneFocus', true);
}, 200);
})
.keydown(function(event){
if( self._trigger('keydown', event, self.element) !== false ){
self._keydown(event);
self.keyCancel = false;
} else {
self.keyCancel = true;
}
})
.keyup(function(event){
if( self._trigger('keyup', event, self.element) !== false && self.keyCancel !== true ){
self._keyup(event);
}
})
.focus(function(event){
$(this).attr('focusStatus', 'focus');
options.stopShow = false;
if( self._trigger('focus', event, self.element) !== false ){
self._load();
}
})
.bind('keypress click', function(event){
event.stopPropagation();
if( event.keyCode == 13 ){ return false; }
})
.blur(function(event){
$(this).attr('focusStatus', 'blur');
if( self.keyTimer ){
clearInterval(self.keyTimer);
self.keyTimer = null;
}
if( self._trigger('blur', event, self.element) !== false ){
if( self.list.popupLayer('isOpen') == true ){
//列表打开状态，输入框失去焦点时，执行选中列表中被选的条目
//事件会发生在点击条目之后
var li = self.list.find('.' + options.hoverClass);
if( li.length && li.attr('index') != '-1' ){
self._selected(event, li);
return;
}
}
self._unselected(event);
}
}); if( typeof(this.element.attr('searchKey')) != 'string' ){
this.element.attr('searchKey', $.trim(this.element.val()));
} this.pop = $('<div style="min-width:100px;"></div>').addClass(options.listContClass);
this.list = $('<ul/>').addClass(options.listClass);
}, _load: function(){
if( this.options.dataLoading ) return;
if( this.selected && this.showing ) return; var options = this.options,
self = this,
key = $.trim(this.element.val());
this.element.attr('searchKey', key);
if( key == '' && options.emptyKey == false ){
if( self.element.data('oneFocus') === true )
this.hide();
return;
} this.element.addClass(options.loadingClass);
if( typeof(options.url) == 'string' && options.ajax ){
options.dataLoading = true;
var param = {};
param[options.ajaxKey] = key;
$.ajax({
url: options.url,
type: 'POST',
data: param,
success: function(data){
options.dataLoading = false;
self.element.removeClass(options.loadingClass);
if( $.trim(self.element.val()) == self.element.attr('searchKey') ){
options.dataList = data[options.ajax];
if( options.stopShow == true ){
self.show([]);
} else {
self.show(options.dataList);
}
options.stopShow = false;
} else {
self._load();
}
},
error: function(xhr, status){
self.show([]);
},
dataType: 'json'
});
} else {
this._trigger('load', null, self);
}
}, _keyInterval: function(){
if( this.element.attr('searchKey') != $.trim(this.element.val()) ){
this.selected = null;
this._load();
}
},
_keydown: function(event){
clearInterval(this.ajaxTimer);
var options = this.options,
self = this;
if( event.keyCode == this.KEY_TAB ){
this.hide();
return;
}
if( options.dataLoading || this.keyTimer ){ return }
this.keyTimer = setInterval(function(){self._keyInterval()}, 500);
},
_keyup: function(event){
if( this.keyTimer ){
clearInterval(this.keyTimer);
this.keyTimer = null;
} var options = this.options,
self = this,
list = this.pop.find('li').not('[ac="isExt"]');
if( list.length && $.inArray(event.keyCode, this.CTRLKEY) > -1 ){
var li = list.filter('.' + options.hoverClass);
list.removeClass(options.hoverClass);
switch(event.keyCode){
case this.KEY_DOWN:
if( this.showing ){
if( li.length ){
if( list.index(li) != list.length - 1 ){
li = li.next();
} else {
li = $();
this.element.val(this.element.attr('searchKey'));
break;
}
} else {
li = list.filter(':first');
}
this.element.val(li.find('[litext]').length ? li.find('[litext]').text() : li.text());
}
break;
case this.KEY_UP:
if( this.showing ){
if( li.length ){
if( list.index(li) == 0 ){
li = $();
this.element.val(this.element.attr('searchKey'));
break;
} else {
li = li.prev();
}
} else {
li = list.filter(':last');
}
this.element.val(li.find('[litext]').length ? li.find('[litext]').text() : li.text());
}
break;
case this.KEY_RETURN:
if( li.length ){
if( parseInt(li.attr('index'), 10) > 0 ){
this._selected(event, li);
} else {
if( this.prevKey == this.KEY_RETURN ){
this._unselected(event);
}
}
} else {
this._trigger('pressEnter', event);
}
break;
default:
this.hide();
}
li.addClass(options.hoverClass);
this.prevKey = event.keyCode;
} else {
this.ajaxTimer = setTimeout(function(){self._keyInterval()}, 100);
if( event.keyCode == this.KEY_RETURN ) this._trigger('pressEnter', event);
}
}, _selected: function(event, li){
if( this.keyTimer ) clearInterval(this.keyTimer);
this.keyTimer = null;
this.selected = li;
this.element.attr('searchKey', li.find('[litext]').length ? li.find('[litext]').text() : li.text());
this._trigger('selected', event, li);
this.hide();
}, _unselected: function(event){
if( this.list.popupLayer('isOpen') == true ){
var li = this.list.find('li:first'), litext = li.find('[litext]').length ? li.find('[litext]').text() : li.text();
if( li.length && litext == this.element.val() ){
this._selected(event, li);
return;
}
}
this._trigger('unselected', event, this.element);
this.hide();
}, _format_li: function(str){
var args = Array.prototype.slice.call(arguments);
var re = new RegExp('%([1-' + (args.length - 1) + '])', 'g');
return str.replace(re, function(match, index){
return args[index];
});
}, show: function(data, position){
this.options.dataLoading = false;
this.element.removeClass(this.options.loadingClass);
if( this.element.is(':hidden') ){
this.hide();
return;
}
if( this.list.popupLayer('isOpen') == true ){
this._trigger('hide', null, this.list);
}
this.list.empty();
var self = this, options = this.options;
var newData = this._trigger('formatList', null, data);
if( $.isArray(newData) ) data = newData;
if( data.length ){
var l = options.listMax > 0 ? Math.min(data.length, options.listMax) : data.length;
for( var i = 0; i < l; i++ ){
var template = [options.li_template];
for( var j = 0; j < options.li_id.length; j++ ){
template.push(data[i][options.li_id[j]]);
}
var li = $(this._format_li.apply(this, template)).appendTo(this.list);
if( i % 2 == 0 ){
li.addClass(options.listHighlightClass);
}
}
} else {
if( options.showEmptyList != true ){
this.hide();
return;
}
}
this.list.popupLayer('close');
if( this._trigger('beforeShow', null, this.list) !== false ){
var pos = {of: this.element, my: 'left top', at: 'left bottom', collision: 'none'};
position = position || options.position;
if( $.isPlainObject(position) ){
pos = $.extend(pos, position);
} else if( $.isArray(position) ){
if( position[0].constructor == Number && position[1].constructor == Number ){
pos = position;
}
}
this.list.popupLayer({
uiPopup: this.pop.empty(),
width: options.width || this.element.outerWidth(),
position: pos,
open: function(){
var li = $(this).find('li').not('[ac="isExt"], [index^=-]');
li.mouseover(function(){
$(this).addClass(options.hoverClass);
})
.mouseout(function(){
li.removeClass(options.hoverClass);
});
}
});
this.showing = true;
}
}, hide: function(){
this._trigger('hide', null, this.list);
var self = this;
setTimeout(function(){
self.list.popupLayer('close');
self.showing = false;
}, 200);
}, _setOption: function(key, value) {
$.Widget.prototype._setOption.apply(this, arguments);
switch (key) {
case "position":
break;
}
}
});
})(jQuery);
中url 和ajax 代表什么
php怎么

Answer 1

http://www.cnblogs.com/hyl8218/archive/2010/03/19/1688828.html
http://code.google.com/p/jquery-autocomplete/
搞个简单的例子，搞明白了。然后在加入到项目

Answer 2

以前胡乱写过一个autofind的js用法很简单：$("#input").autofind({url:get.php})get.php 就是用来从数据库获取的程序，最后打包成json数据返回。类似以下代码：
$key = $this->spArgs('key');
$rows = spClass('Mcljh')->findSql('select  distinct  ' . $field . '  as   value  from cl_jihua   where  ' . $field . '  like "%' . $key . '%"   order by  ' . $field . ' limit 50');
echo json_encode($rows);
exit;
autofind.js
(function($) {
    $.fn.autofind = function( options) {
        var opts = $.extend({}, $.fn.autofind.defaults, options);
        return this.each(function() {
            var $this=$(this);
            var $select=renderAutofind();
            $this.attr('autocomplete','off');
            $this.keyup(function(e){
                var key=$.trim($(this).val());
                if (key!=''){
                    autofindShow($select,$this);
                    requestData(key);
                }
            })
        
            function requestData(key){
                $.getJSON(opts.url,{
                    key:key
                },function(data){
                    var count=data.length;
                    count=count>16?16:count;
                    $select.attr('size',count);
                    $select.get(0).length=0;
                    $(data).each(function(i){
                        $select.get(0).options.add(new Option(data[i].value,data[i].value));
                    } );
                });
            }            function autofindShow($select,$input){
                var  fw=$input.width(),fh=$input.height(),fo=$input.offset();
                var pd=parseInt($input.css('padding-left'))+parseInt($input.css('padding-right'))
                $select.css({
                    'left':fo.left,
                    'top':fo.top+fh+2,
                    'width':fw+pd+2
                }).show();
            }
            function renderAutofind() {
                var  $result=$('<select></select>');
                $result.attr({
                    'multiple':false,
                    'size':16
                });
                $result.css({
                    'position':'absolute',
                    'display':'none'
                })
                $result.change(function(){
                    $this.val($(this).val());
                }).dblclick(function(){
                    $this.val($(this).val());
                    $(this).hide();
                })
                .blur(function(){
                    $(this).hide();
                })
                .mouseout(function(){
                    $(this).hide();
                })
                .keydown(function(e){
                   if (e.keyCode==13) $(this).hide()
                })
                $('body').append($result);
                return $result;
            }
        })
    }
    $.fn.autofind.defaults = {};
})(jQuery);