- 浏览: 309816 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
di1984HIT:
不错,不错。
Jquery.LazyLoad.js插件修正版下载,实现图片延迟加载特效 -
fncj:
好东西,
freemarker常用技巧 -
xwy55555:
说得很清楚
大型网站框架的演变 -
gxz1989611:
这个东西好,我转载了~~
40 个轻量级 JavaScript 库 -
gxz1989611:
恩,这个标题真是考虑到了SEO啊!!!
这才是真正的JQuery.ajax传递中文参数的解决方法
<div class="search_item_content"> <b>商品搜索</b> <input type="text" id="quick_search" name="q" value="" /> <input type="submit" value="搜索" class="btn" /> </div>
比如页面上有如上的的搜索框。。。。。
那边在下面加入类似这样的代码:
jQuery(document).ready(function() { jQuery("#quick_search").autocomplete( "$!{request.contextPath}/autoComplete.shtml", { max: 10, scroll: false, width: 162 } ); })
上面的autoComplete.shtml是一个struts的ACTION代码如下
public class AutoCompleteAction extends Action { public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { SearchSuggestionManager service = (SearchSuggestionManager) WebAppUtil .getService("searchSuggestionService", request); String keyword = request.getParameter("q"); keyword=EscapeUnescape.unescape(keyword); List<SearchSuggestion> results = service .getSearchSuggestionsByKeyword(keyword); try { response.setContentType("text/html; charset=GBK"); PrintWriter out = response.getWriter(); JSONArray jsonArray = JSONArray.fromObject(results); out.print(jsonArray.toString()); out.flush(); out.close(); return null; } catch (Exception e) { e.printStackTrace(); return null; } } }
这个ACTION返回的是一个json类型的数组,我们用JSON来做数据的传递。格式是类似这样的
["索尼 H50","索爱"]
PS:由于我们的系统是GBK的,而JQUERY的AJAX默认是UTF-8的所以我们要加入一个EscapeUnescape.java来进行格式的转换:
public class EscapeUnescape { public static String escape(String src) { int i; char j; StringBuffer tmp = new StringBuffer(); tmp.ensureCapacity(src.length() * 6); for (i = 0; i < src.length(); i++) { j = src.charAt(i); if (Character.isDigit(j) || Character.isLowerCase(j) || Character.isUpperCase(j)) tmp.append(j); else if (j < 256) { tmp.append("%"); if (j < 16) tmp.append("0"); tmp.append(Integer.toString(j, 16)); } else { tmp.append("%u"); tmp.append(Integer.toString(j, 16)); } } return tmp.toString(); } public static String unescape(String src) { StringBuffer tmp = new StringBuffer(); tmp.ensureCapacity(src.length()); int lastPos = 0, pos = 0; char ch; while (lastPos < src.length()) { pos = src.indexOf("%", lastPos); if (pos == lastPos) { if (src.charAt(pos + 1) == 'u') { ch = (char) Integer.parseInt(src .substring(pos + 2, pos + 6), 16); tmp.append(ch); lastPos = pos + 6; } else { ch = (char) Integer.parseInt(src .substring(pos + 1, pos + 3), 16); tmp.append(ch); lastPos = pos + 3; } } else { if (pos == -1) { tmp.append(src.substring(lastPos)); lastPos = src.length(); } else { tmp.append(src.substring(lastPos, pos)); lastPos = pos; } } } return tmp.toString(); } public static void main(String[] args) { String stest = "中文1234 abcd[]()<+>,.~\\"; System.out.println(stest); System.out.println(escape(stest)); System.out.println(unescape(escape(stest))); } }
并且我对jquery.autocomplete.js的输入部分进行了修改,我修改后的jquery.autocomplete.js源代码如下
/* * Autocomplete - jQuery plugin 1.0.2 * * Copyright (c) 2007 Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar, Jörn Zaefferer * * 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 hideResultsNow() { var wasVisible = select.visible(); select.hide(); clearTimeout(timeout); stopLoading(); if (options.mustMatch) { // call search and run callback jQueryinput.search( function (result){ // if no value found, clear the input box if( !result ) { if (options.multiple) { var words = trimWords(jQueryinput.val()).slice(0, -1); jQueryinput.val( words.join(options.multipleSeparator) + (words.length ? options.multipleSeparator : "") ); } else jQueryinput.val( "" ); } } ); } if (wasVisible) // position cursor at end of input field jQuery.Autocompleter.Selection(input, input.value.length, input.value.length); }; function receiveData(q, data) { if ( data && data.length && hasFocus ) { stopLoading(); select.display(data, q); autoFill(q, data[0].value); select.show(); } else { hideResultsNow(); } }; function request(term, success, failure) { if (!options.matchCase) term = term.toLowerCase(); var data = cache.load(term); // recieve the cached data if (data && data.length) { success(term, data); // if an AJAX url has been supplied, try loading the data now } else if( (typeof options.url == "string") && (options.url.length > 0) ){ var extraParams = { timestamp: +new Date() }; jQuery.each(options.extraParams, function(key, param) { extraParams[key] = typeof param == "function" ? param() : param; }); jQuery.ajax({ // try to leverage ajaxQueue plugin to abort previous requests mode: "abort", // limit abortion to this input port: "autocomplete" + input.name, dataType: options.dataType, url: options.url, data: jQuery.extend({ q: escape(term), limit: options.max }, extraParams), success: function(data) { var parsed = options.parse && options.parse(data) || parse(data); cache.add(term, parsed); success(term, parsed); } }); } else { // if we have a failure, we need to empty the list -- this prevents the the [TAB] key from selecting the last successful match select.emptyList(); failure(term); } }; function parse(data) { var parsed = []; var rows = eval('('+data+')'); for (var i=0; i < rows.length; i++) { var row = jQuery.trim(rows[i]); if (row) { row = row.split("|"); parsed[parsed.length] = { data: row, value: row[0], result: options.formatResult && options.formatResult(row, row[0]) || row[0] }; } } return parsed; }; 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) { var data = {}; var length = 0; function matchSubset(s, sub) { if (!options.matchCase) s = s.toLowerCase(); var i = s.indexOf(sub); if (i == -1) return false; return i == 0 || options.matchContains; }; function add(q, value) { if (length > options.cacheLength){ flush(); } if (!data[q]){ length++; } data[q] = value; } function populate(){ if( !options.data ) return false; // track the matches var stMatchSets = {}, nullData = 0; // 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; } function moveSelect(step) { listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE); movePosition(step); var activeItem = listItems.slice(active, active + 1).addClass(CLASSES.ACTIVE); if(options.scroll) { var offset = 0; listItems.slice(0, active).each(function() { offset += this.offsetHeight; }); if((offset + activeItem[0].offsetHeight - list.scrollTop()) > list[0].clientHeight) { list.scrollTop(offset + activeItem[0].offsetHeight - list.innerHeight()); } else if(offset < list.scrollTop()) { list.scrollTop(offset); } } }; function movePosition(step) { active += step; if (active < 0) { active = listItems.size() - 1; } else if (active >= listItems.size()) { active = 0; } } function limitNumberOfItems(available) { return options.max && options.max < available ? options.max : available; } function fillList() { list.empty(); var max = limitNumberOfItems(data.length); for (var i=0; i < max; i++) { if (!data[i]) continue; var formatted = options.formatItem(data[i].data, i+1, max, data[i].value, term); if ( formatted === false ) continue; var li = jQuery("<li/>").html( options.highlight(formatted, term) ).addClass(i%2 == 0 ? "ac_even" : "ac_odd").appendTo(list)[0]; jQuery.data(li, "ac_data", data[i]); } listItems = list.find("li"); if ( options.selectFirst ) { listItems.slice(0, 1).addClass(CLASSES.ACTIVE); active = 0; } // apply bgiframe if available if ( jQuery.fn.bgiframe ) list.bgiframe(); } return { display: function(d, q) { init(); data = d; term = q; fillList(); }, next: function() { moveSelect(1); }, prev: function() { moveSelect(-1); }, pageUp: function() { if (active != 0 && active - 8 < 0) { moveSelect( -active ); } else { moveSelect(-8); } }, pageDown: function() { if (active != listItems.size() - 1 && active + 8 > listItems.size()) { moveSelect( listItems.size() - 1 - active ); } else { moveSelect(8); } }, hide: function() { element && element.hide(); listItems && listItems.removeClass(CLASSES.ACTIVE); active = -1; }, visible : function() { return element && element.is(":visible"); }, current: function() { return this.visible() && (listItems.filter("." + CLASSES.ACTIVE)[0] || options.selectFirst && listItems[0]); }, show: function() { var offset = jQuery(input).offset(); element.css({ width: typeof options.width == "string" || options.width > 0 ? options.width : jQuery(input).width(), top: offset.top + input.offsetHeight, left: offset.left }).show(); if(options.scroll) { list.scrollTop(0); list.css({ maxHeight: options.scrollHeight, overflow: 'auto' }); if(jQuery.browser.msie && typeof document.body.style.maxHeight === "undefined") { var listHeight = 0; listItems.each(function() { listHeight += this.offsetHeight; }); var scrollbarsVisible = listHeight > options.scrollHeight; list.css('height', scrollbarsVisible ? options.scrollHeight : listHeight ); if (!scrollbarsVisible) { // IE doesn't recalculate width when scrollbar disappears listItems.width( list.width() - parseInt(listItems.css("padding-left")) - parseInt(listItems.css("padding-right")) ); } } } }, selected: function() { var selected = listItems && listItems.filter("." + CLASSES.ACTIVE).removeClass(CLASSES.ACTIVE); return selected && selected.length && jQuery.data(selected[0], "ac_data"); }, emptyList: function (){ list && list.empty(); }, unbind: function() { element && element.remove(); } }; }; 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);
在数据输入的时候进行了转码,这样传到后台数据库的时候就不会发生乱码的问题,这两个文件见附件
具体实例可以参看www.suning.cn的商品搜索,欢迎交流
评论
4 楼
kirk1127
2009-07-03
你好,那个是透明背景,在js中哪里可以修改成不透明的背景,我找了半天就找见,请教一下
3 楼
kevinhgy
2009-02-05
paskaa 写道
生成的json格式要这样的,["诺基亚","诺基亚","诺基亚 n71","诺基亚 n81"]
# function parse(data) {
# var parsed = [];
# var rows = eval('('+data+')');
# for (var i=0; i < rows.length; i++) {
# var row = jQuery.trim(rows[i]);
# if (row) {
# row = row.split("|");
# parsed[parsed.length] = {
# data: row,
# value: row[0],
# result: options.formatResult && options.formatResult(row, row[0]) || row[0]
# };
# }
# }
# return parsed;
# };
这个解析的函数我改写过了
# function parse(data) {
# var parsed = [];
# var rows = eval('('+data+')');
# for (var i=0; i < rows.length; i++) {
# var row = jQuery.trim(rows[i]);
# if (row) {
# row = row.split("|");
# parsed[parsed.length] = {
# data: row,
# value: row[0],
# result: options.formatResult && options.formatResult(row, row[0]) || row[0]
# };
# }
# }
# return parsed;
# };
这个解析的函数我改写过了
返回一个字符串就可以,并不一定要返回json,默认的分隔是
options.lineSeparator = options.lineSeparator || "\n";
options.cellSeparator = options.cellSeparator || "|";
这个在此jQuery.fn.autocomplete源码里面可以看到
2 楼
paskaa
2008-12-06
生成的json格式要这样的,["诺基亚","诺基亚","诺基亚 n71","诺基亚 n81"]
# function parse(data) {
# var parsed = [];
# var rows = eval('('+data+')');
# for (var i=0; i < rows.length; i++) {
# var row = jQuery.trim(rows[i]);
# if (row) {
# row = row.split("|");
# parsed[parsed.length] = {
# data: row,
# value: row[0],
# result: options.formatResult && options.formatResult(row, row[0]) || row[0]
# };
# }
# }
# return parsed;
# };
这个解析的函数我改写过了
# function parse(data) {
# var parsed = [];
# var rows = eval('('+data+')');
# for (var i=0; i < rows.length; i++) {
# var row = jQuery.trim(rows[i]);
# if (row) {
# row = row.split("|");
# parsed[parsed.length] = {
# data: row,
# value: row[0],
# result: options.formatResult && options.formatResult(row, row[0]) || row[0]
# };
# }
# }
# return parsed;
# };
这个解析的函数我改写过了
1 楼
syncml
2008-12-05
out.print(jsonArray.toString());
生成的这个数据,我的autocomplete老是认为他是一个字符串,并不能解析成json数据,不知道错在哪里?
http://www.iteye.com/problems/7738
生成的这个数据,我的autocomplete老是认为他是一个字符串,并不能解析成json数据,不知道错在哪里?
http://www.iteye.com/problems/7738
发表评论
-
让jQuery.form.js支持中文
2009-02-27 10:59 2413在后台JAVA中对参数对应的转码: java代码: jav ... -
jQuery Tooltip插件
2008-12-08 10:12 1461Cut & Paste Ajax Too ... -
jquery插件ajaxify实现web 2.0
2008-12-06 17:42 2005Download 插件。 加载 jQuery librar ... -
jQuery Corners实现圆角元素的好插件!
2008-12-02 16:57 2654文档介绍 http://www.atblabs.com/jqu ... -
jQuery的位置插件Dimensions
2008-12-02 16:07 1953概述 dimensions插件是一个获得元素尺寸的插件. ... -
jquery.autocomplete插件简介(续)
2008-12-01 17:10 3417对autocomplete的一些参数进行说明 Options: ... -
jquery.autocomplete插件简介
2008-12-01 16:52 2110Autocomplete 是在INPUT框上出现下拉提示 ... -
jquery.validate.js简介(续2)
2008-11-27 23:48 1546Name Type validate( ... -
jquery.validate.js简介(续1)
2008-11-26 18:06 5816onsubmit Boolean Default ... -
jquery.validate.js简介
2008-11-24 18:04 5866参看:http://docs.jquery.com/Plugi ...
相关推荐
**jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...
`jQuery.autocomplete.js` 是一个流行的JavaScript库jQuery的扩展插件,主要用于实现输入框的自动补全功能。这个插件极大地增强了用户在网页上的交互体验,尤其在处理大量可选项时,用户可以通过输入部分文字快速...
在使用 `jQuery.autocomplete` 时,要注意避免内存泄漏,正确处理异步请求的生命周期,以及在不再需要时销毁插件实例。此外,要确保输入框的可用性和可访问性,符合 Web 内容无障碍指南(WCAG)标准。 综上所述,`...
于是乎下载了一个jquery.autocomplete-1.1.3,但引用到项目后,发现几个问题,并相应做了修改: 1.中文输入后,服务端不能正常获取ajax提交的数据(此处,当然可以用相应转码,本人试了n种方便仍改),细看代码...
**jQuery Autocomplete 实例详解** `jQuery UI` 的 `Autocomplete` 是一个强大的功能,它为输入框提供了自动补全的功能,广泛应用于各种 Web 应用中,如搜索引擎、表单填充等。这个实例将深入讲解如何在项目中有效...
**jQuery Autocomplete 仿 Google 实例** 在网页开发中,Autocomplete 功能是常见的交互设计,它可以提升用户体验,帮助用户快速找到他们想要输入的内容。jQuery UI 的 Autocomplete 插件是一个强大的工具,它允许...
接下来,引入 jQuery AutoComplete 插件的 CSS 和 JS 文件。你可以从其官方网站(如:http://jqueryui.com/autocomplete/)下载,或使用 CDN 地址: ```html <link rel="stylesheet" href="https://code.jquery....
要使用 jQuery Autocomplete,首先需要引入 jQuery 库和该插件的 JavaScript 文件。通常情况下,你需要在 HTML 页面中添加如下代码: ```html <script src="https://code.jquery.com/jquery.js"></script> ...
本文将深入探讨如何利用AJAX实现一个支持多选功能的自动完成下拉列表,该列表具有类似于JQuery.autocomplete的特性,但提供了更丰富的交互体验。 标题中的"自动完成"是指一种常见于搜索框或输入字段的功能,当用户...
**jQuery Autocomplete** 是一个非常流行的JavaScript库,用于在用户输入时提供动态建议或自动完成。这个资源包包含了丰富的信息和实例,可以帮助开发者更深入地理解和应用jQuery Autocomplete插件。 **1. 插件介绍...
《jQuery Autocomplete插件详解与应用实践》 在Web开发中,用户界面的友好性和交互性至关重要,jQuery Autocomplete插件就是为此而生的一个利器。它是一个轻量级的插件,提供了丰富的功能,能够帮助开发者实现高效...
利用jquery.autocomplete.js插件实现了文本框自动补全的功能, 附件包含两个实例代码,均以txt文档显示,都有前台和后台代码。一个是传一个参数,一个是传两个参数,后台以一般处理程序ashx文件编写。大家只需要修改...
<script src="path/to/jquery.autocomplete.min.js"> ``` ### 2. 初始化 AutoComplete 初始化 AutoComplete 需要对输入框元素进行操作,并提供数据源。数据源可以是静态数组、AJAX 请求返回的数据或者函数。...
总结,这个压缩包提供了JavaScript和CSS实现自动补全功能的实例,通过学习这个例子,你可以掌握如何处理用户输入、动态更新DOM、样式设计以及实现交互效果。这对于提升网页的用户体验和开发技能非常有帮助。
本文实例讲述了jQuery autoComplete插件两种使用方式及动态改变参数值的方法。分享给大家供大家参考,具体如下: 一、一次加载、多次使用: 前端JS代码: /*客户名称自动匹配*/ function customerAutoComplete(){ ...
1. **引入资源**:首先,确保引入jQuery库,然后引入jQuery Autocomplete的JS和CSS文件。 2. **数据源**:准备数据源,可以是静态数据,也可以是动态获取的数据,如通过Ajax请求。 3. **初始化插件**:通过...
综上,"jQuery-Autocomplete-master"压缩包提供的实例,不仅展示了如何使用jQuery Autocomplete插件实现自动补全功能,还涵盖了本地和远程数据源的处理,对于前端开发者来说,这是一个很好的学习和实践资源。
<title>jQuery AutoComplete 实例 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> ...
在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...
**jQuery Complete:深入理解jQuery Autocomplete** jQuery是一个广泛使用的JavaScript库,它极大地简化了网页的交互性和动态功能。"jQuery Complete"着重关注的是jQuery的Autocomplete功能,这是一个强大的工具,...