首页手记 jQuery Autocomplete插件使用方法及实例

jQuery Autocomplete插件使用方法及实例

标签：

JQuery

最近一个需求里要用到一个自动提示的功能，类似于淘宝里的搜索，用户输入关键字，在下面给出提示。现在网上已经有些成熟的插件，就直接拿来用了。网上的例子千篇一律，实用性不高。特在此作个记录。希望能帮助到有需要的朋友。

（1）效果图：

（2）页面上的调用方式：

需要导入的js:

jquery-1.2.6.js jquery-autocomplete/lib/jquery.bgiframe.min.js jquery-autocomplete/lib/jquery.ajaxQueue.js jquery-autocomplete/lib/thickbox-compressed.js jquery-autocomplete/jquery.autocomplete.js 这几个js是必须导入的，在网上下载的jquery autocomplete插件包里都有，可以直接导入使用

页面jsp写法：

jQuery(document).ready(function() {
jQuery("#quick_search").autocomplete(
  "autoCompleteAction.go",
  {
  minChars:1,
  max: 20,
  width: 450,
  scroll: true,
        scrollHeight: 300,
        dataType: "json",
        parse: function(data) {
   return $.map(data, function(row) {
    return {
     data: row,
     value: row.zhongwen,
     //result: row.zhongwen + " <" + row.pinyin + ">"
     result: row.zhongwen
    }
   });
  },
  formatItem: function(row, i, max) {
   //return row.zhongwen + "     " + row.pinyin ;
   return row.zhongwen ;
  }
  /*
  formatResult: function(row) {
     $("#addrId").val(row.addrId);
   return row.zhongwen + " "+row.addrId;
  }
  */
  }
).result(function(e, item) {
  //$("#content").append("<p>selected " + format(item) + "</p>");
  $("#addrId").val(item.addrId);
});
})

如果数据库只返回一个值，那在页面上可以简单调用：

jQuery(document).ready(function() { jQuery("#quick_search").autocomplete( "autoCompleteAction.go", { max: 10, scroll: false, width: 162 } );})

Action的写法：

public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
     String keyword = WebUtils.getAtributeAndParam(request, "q");
   keyword=EscapeUnescape.unescape(keyword);

   // String sql = "select address||'        '||address_lk from s_addr_view where address like '%"+keyword+"%' or address_lk like '%'||upper('"+keyword+"')||'%'";
    String sql = "select address,address_lk ,addr_id from s_addr_view where address like '%'||upper('"+keyword+"')||'%' or address_lk like '%'||upper('"+keyword+"')||'%'";

    List<String[]> resultsTemp = CommUtil.getStrsList(sql);
   //   List results = new ArrayList();
        JSONArray ja = new JSONArray();
        for(String[] temp : resultsTemp){
         JSONObject jo = new JSONObject();
         jo.put("zhongwen", temp[0]);
         jo.put("pinyin", temp[1]);
         jo.put("addrId",temp[2]);
         ja.add(jo);
      //   results.add(jo);
        }
   try {
    response.setContentType("text/html; charset=GBK");
    PrintWriter out = response.getWriter();
  //  JSONArray jsonArray = JSONArray.fromObject(results);
   // System.out.println("--jsonArray.toString():"+jsonArray.toString());
    //   out.print(jsonArray.toString());
    System.out.println("--jsonArray.toString():"+ja.toString());
    out.print(ja.toString());
    out.flush();
    out.close();
    return null;
   } catch (Exception e) {
    e.printStackTrace();
    return null;
   }

}

这个action在struts 1 的配置文件里的path就这么配置： path="/autoCompleteAction"

（3）jquery.autocomplete.js的完整写法（在源代码的基础上进行了修改，支持了ie6以上版本的滚动条使用）

/*
* Autocomplete - jQuery plugin 1.0.2
*
* Copyright (c) 2007 Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar, Zaefferer
* modified by liuqf 20111128
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Revision: jQueryId: jquery.autocomplete.js 5747 2008-06-25 18:30:55Z joern.zaefferer $
*
*/

;(function(jQuery) {

jQuery.fn.extend({
autocomplete: function(urlOrData, options) {
  var isUrl = typeof urlOrData == "string";
  options = jQuery.extend({}, jQuery.Autocompleter.defaults, {
   url: isUrl ? urlOrData : null,
   data: isUrl ? null : urlOrData,
   delay: isUrl ? jQuery.Autocompleter.defaults.delay : 10,
   max: options && !options.scroll ? 10 : 150
  }, options);

  // if highlight is set to false, replace it with a do-nothing function
  options.highlight = options.highlight || function(value) { return value; };

  // if the formatMatch option is not specified, then use formatItem for backwards compatibility
  options.formatMatch = options.formatMatch || options.formatItem;

  return this.each(function() {
   new jQuery.Autocompleter(this, options);
  });
},
result: function(handler) {
  return this.bind("result", handler);
},
search: function(handler) {
  return this.trigger("search", [handler]);
},
flushCache: function() {
  return this.trigger("flushCache");
},
setOptions: function(options){
  return this.trigger("setOptions", [options]);
},
unautocomplete: function() {
  return this.trigger("unautocomplete");
}
});

jQuery.Autocompleter = function(input, options) {

var KEY = {
  UP: 38,
  DOWN: 40,
  DEL: 46,
  TAB: 9,
  RETURN: 13,
  ESC: 27,
  COMMA: 188,
  PAGEUP: 33,
  PAGEDOWN: 34,
  BACKSPACE: 8
};

// Create $ object for input element
var jQueryinput = jQuery(input).attr("autocomplete", "off").addClass(options.inputClass);

var timeout;
var previousValue = "";
var cache = jQuery.Autocompleter.Cache(options);
var hasFocus = 0;
var lastKeyPressCode;
var config = {
  mouseDownOnSelect: false
};
var select = jQuery.Autocompleter.Select(options, input, selectCurrent, config);

var blockSubmit;

// prevent form submit in opera when selecting with return key
jQuery.browser.opera && jQuery(input.form).bind("submit.autocomplete", function() {
  if (blockSubmit) {
   blockSubmit = false;
   return false;
  }
});

// only opera doesn't trigger keydown multiple times while pressed, others don't work with keypress at all
jQueryinput.bind((jQuery.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {
  // track last key pressed
  lastKeyPressCode = event.keyCode;
  switch(event.keyCode) {

   case KEY.UP:
    event.preventDefault();
    if ( select.visible() ) {
     select.prev();
    } else {
     onChange(0, true);
    }
    break;

   case KEY.DOWN:
    event.preventDefault();
    if ( select.visible() ) {
     select.next();
    } else {
     onChange(0, true);
    }
    break;

   case KEY.PAGEUP:
    event.preventDefault();
    if ( select.visible() ) {
     select.pageUp();
    } else {
     onChange(0, true);
    }
    break;

   case KEY.PAGEDOWN:
    event.preventDefault();
    if ( select.visible() ) {
     select.pageDown();
    } else {
     onChange(0, true);
    }
    break;

   // matches also semicolon
   case options.multiple && jQuery.trim(options.multipleSeparator) == "," && KEY.COMMA:
   case KEY.TAB:
   case KEY.RETURN:
    if( selectCurrent() ) {
     // stop default to prevent a form submit, Opera needs special handling
     event.preventDefault();
     blockSubmit = true;
     return false;
    }
    break;

   case KEY.ESC:
    select.hide();
    break;

   default:
    clearTimeout(timeout);
    timeout = setTimeout(onChange, options.delay);
    break;
  }
}).focus(function(){
  // track whether the field has focus, we shouldn't process any
  // results if the field no longer has focus
  hasFocus++;
}).blur(function() {
  hasFocus = 0;
  if (!config.mouseDownOnSelect) {
   hideResults();
  }
}).click(function() {
  // show select when clicking in a focused field
  if ( hasFocus++ > 1 && !select.visible() ) {
   onChange(0, true);
  }
}).bind("search", function() {
  // TODO why not just specifying both arguments?
  var fn = (arguments.length > 1) ? arguments[1] : null;
  function findValueCallback(q, data) {
   var result;
   if( data && data.length ) {
    for (var i=0; i < data.length; i++) {
     if( data[i].result.toLowerCase() == q.toLowerCase() ) {
      result = data[i];
      break;
     }
    }
   }
   if( typeof fn == "function" ) fn(result);
   else jQueryinput.trigger("result", result && [result.data, result.value]);
  }
  jQuery.each(trimWords(jQueryinput.val()), function(i, value) {
   request(value, findValueCallback, findValueCallback);
  });
}).bind("flushCache", function() {
  cache.flush();
}).bind("setOptions", function() {
  jQuery.extend(options, arguments[1]);
  // if we've updated the data, repopulate
  if ( "data" in arguments[1] )
   cache.populate();
}).bind("unautocomplete", function() {
  select.unbind();
  jQueryinput.unbind();
  jQuery(input.form).unbind(".autocomplete");
});

function selectCurrent() {
  var selected = select.selected();
  if( !selected )
   return false;

  var v = selected.result;
  previousValue = v;

  if ( options.multiple ) {
   var words = trimWords(jQueryinput.val());
   if ( words.length > 1 ) {
    v = words.slice(0, words.length - 1).join( options.multipleSeparator ) + options.multipleSeparator + v;
   }
   v += options.multipleSeparator;
  }

  jQueryinput.val(v);
  hideResultsNow();
  jQueryinput.trigger("result", [selected.data, selected.value]);
  return true;
}

function onChange(crap, skipPrevCheck) {
  if( lastKeyPressCode == KEY.DEL ) {
   select.hide();
   return;
  }

  var currentValue = jQueryinput.val();

  if ( !skipPrevCheck && currentValue == previousValue )
   return;

  previousValue = currentValue;

  currentValue = lastWord(currentValue);
  if ( currentValue.length >= options.minChars) {
   jQueryinput.addClass(options.loadingClass);
   if (!options.matchCase)
    currentValue = currentValue.toLowerCase();
   request(currentValue, receiveData, hideResultsNow);
  } else {
   stopLoading();
   select.hide();
  }
};

function trimWords(value) {
  if ( !value ) {
   return [""];
  }
  var words = value.split( options.multipleSeparator );
  var result = [];
  jQuery.each(words, function(i, value) {
   if ( jQuery.trim(value) )
    result[i] = jQuery.trim(value);
  });
  return result;
}

function lastWord(value) {
  if ( !options.multiple )
   return value;
  var words = trimWords(value);
  return words[words.length - 1];
}

// fills in the input box w/the first match (assumed to be the best match)
// q: the term entered
// sValue: the first matching result
function autoFill(q, sValue){
  // autofill in the complete box w/the first match as long as the user hasn't entered in more data
  // if the last user key pressed was backspace, don't autofill
  if( options.autoFill && (lastWord(jQueryinput.val()).toLowerCase() == q.toLowerCase()) && lastKeyPressCode != KEY.BACKSPACE ) {
   // fill in the value (keep the case the user has typed)
   jQueryinput.val(jQueryinput.val() + sValue.substring(lastWord(previousValue).length));
   // select the portion of the value not typed by the user (so the next character will erase)
   jQuery.Autocompleter.Selection(input, previousValue.length, previousValue.length + sValue.length);
  }
};

function hideResults() {
clearTimeout(timeout);
timeout = setTimeout(hideResultsNow, 200);
};

function stopLoading() {
jQueryinput.removeClass(options.loadingClass);
};

};

jQuery.Autocompleter.defaults = {
inputClass: "ac_input",
resultsClass: "ac_results",
loadingClass: "ac_loading",
minChars: 1,
delay: 400,
matchCase: false,
matchSubset: true,
matchContains: false,
cacheLength: 10,
max: 100,
mustMatch: false,
extraParams: {},
selectFirst: true,
formatItem: function(row) { return row[0]; },
formatMatch: null,
autoFill: false,
width: 0,
multiple: false,
multipleSeparator: ", ",
highlight: function(value, term) {
  return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
},
    scroll: true,
    scrollHeight: 180
};

jQuery.Autocompleter.Cache = function(options) {

  // no url was specified, we need to adjust the cache length to make sure it fits the local data store
  if( !options.url ) options.cacheLength = 1;

  // track all options for minChars = 0
  stMatchSets[""] = [];

  // loop through the array and create a lookup structure
  for ( var i = 0, ol = options.data.length; i < ol; i++ ) {
   var rawValue = options.data[i];
   // if rawValue is a string, make an array otherwise just reference the array
   rawValue = (typeof rawValue == "string") ? [rawValue] : rawValue;

   var value = options.formatMatch(rawValue, i+1, options.data.length);
   if ( value === false )
    continue;

   var firstChar = value.charAt(0).toLowerCase();
   // if no lookup array for this character exists, look it up now
   if( !stMatchSets[firstChar] )
    stMatchSets[firstChar] = [];

   // if the match is a string
   var row = {
    value: value,
    data: rawValue,
    result: options.formatResult && options.formatResult(rawValue) || value
   };

   // push the current match into the set list
   stMatchSets[firstChar].push(row);

   // keep track of minChars zero items
   if ( nullData++ < options.max ) {
    stMatchSets[""].push(row);
   }
  };

  // add the data items to the cache
  jQuery.each(stMatchSets, function(i, value) {
   // increase the cache size
   options.cacheLength++;
   // add to the cache
   add(i, value);
  });
}

// populate any existing data
setTimeout(populate, 25);

function flush(){
  data = {};
  length = 0;
}

return {
  flush: flush,
  add: add,
  populate: populate,
  load: function(q) {
   if (!options.cacheLength || !length)
    return null;
   /*
    * if dealing w/local data and matchContains than we must make sure
    * to loop through all the data collections looking for matches
    */
   if( !options.url && options.matchContains ){
    // track all matches
    var csub = [];
    // loop through all the data grids for matches
    for( var k in data ){
     // don't search through the stMatchSets[""] (minChars: 0) cache
     // this prevents duplicates
     if( k.length > 0 ){
      var c = data[k];
      jQuery.each(c, function(i, x) {
       // if we've got a match, add it to the array
       if (matchSubset(x.value, q)) {
        csub.push(x);
       }
      });
     }
    }
    return csub;
   } else
   // if the exact item exists, use it
   if (data[q]){
    return data[q];
   } else
   if (options.matchSubset) {
    for (var i = q.length - 1; i >= options.minChars; i--) {
     var c = data[q.substr(0, i)];
     if (c) {
      var csub = [];
      jQuery.each(c, function(i, x) {
       if (matchSubset(x.value, q)) {
        csub[csub.length] = x;
       }
      });
      return csub;
     }
    }
   }
   return null;
  }
};
};

jQuery.Autocompleter.Select = function (options, input, select, config) {
var CLASSES = {
  ACTIVE: "ac_over"
};

var listItems,
  active = -1,
  data,
  term = "",
  needsInit = true,
  element,
  list;

// Create results
function init() {
  if (!needsInit)
   return;
  element = jQuery("<div/>")
  .hide()
  .addClass(options.resultsClass)
  .css("position", "absolute")
  .appendTo(document.body);

  list = jQuery("<ul/>").appendTo(element).mouseover( function(event) {
   if(target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {
             active = jQuery("li", list).removeClass(CLASSES.ACTIVE).index(target(event));
       jQuery(target(event)).addClass(CLASSES.ACTIVE);
         }
  }).click(function(event) {
   jQuery(target(event)).addClass(CLASSES.ACTIVE);
   select();
   // TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
   input.focus();
   return false;
  }).mousedown(function() {
   config.mouseDownOnSelect = true;
  }).mouseup(function() {
   config.mouseDownOnSelect = false;
  });

  if( options.width > 0 )
   element.css("width", options.width);

  needsInit = false;
}

function target(event) {
  var element = event.target;
  while(element && element.tagName != "LI")
   element = element.parentNode;
  // more fun with IE, sometimes event.target is empty, just ignore it then
  if(!element)
   return [];
  return element;
}

jQuery.Autocompleter.Selection = function(field, start, end) {
if( field.createTextRange ){
  var selRange = field.createTextRange();
  selRange.collapse(true);
  selRange.moveStart("character", start);
  selRange.moveEnd("character", end);
  selRange.select();
} else if( field.setSelectionRange ){
  field.setSelectionRange(start, end);
} else {
  if( field.selectionStart ){
   field.selectionStart = start;
   field.selectionEnd = end;
  }
}
field.focus();
};

})(jQuery);

基本上的流程就这些了，可以根据项目的需要自己进行修改！附上这个插件一些参数的定义：

参数说明：
* minChars (Number):
   在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表
* width (Number):
   指定下拉框的宽度. Default: input元素的宽度
* max (Number):
   autoComplete下拉显示项目的个数.Default: 10
* delay (Number):
   击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10
* autoFill (Boolean):
   要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false
* mustMatch (Booolean):
   如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false
* matchContains (Boolean):
   决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
* selectFirst (Boolean):
   如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true
* cacheLength (Number):
   缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10
* matchSubset (Boolean):
   autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true
* matchCase (Boolean):
   比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false
* multiple (Boolean):
   是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false
* multipleSeparator (String):
   如果是多选时,用来分开各个选择的字符. Default: ","
* scroll (Boolean):
   当结果集大于默认高度时是否使用卷轴显示 Default: true
* scrollHeight (Number):
   自动完成提示的卷轴高度用像素大小表示 Default: 180
* formatItem (Function):
   为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.
* formatResult (Function):
   和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.
* formatMatch (Function):
   对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row
* extraParams (Object):
   为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}
* result (handler) Returns: jQuery
   此事件会在用户选中某一项后触发，参数为：
   event: 事件对象. event.type为result.
   data: 选中的数据行.
   formatted:formatResult函数返回的值
   例如：
   $("#singleBirdRemote").result(function(event, data, formatted) {
//如选择后给其他控件赋值，触发别的事件等等
});

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕田峪是谁我也不认识

JS工程师

手记
篇

粉丝

40

获赞与收藏

95

关注作者，订阅最新文章

相关文章推荐

jQuery 常用插件 1

ASP.NET MVC使用jQuery实现Autocomplete

jquery 之 autocomplete 1.10.3

JQuery——常用插件

JQuery——常用插件

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

jQuery Autocomplete插件使用方法及实例

相关文章推荐

阅读免费教程