jQuery autocomplate 自己拡張型プラグイン、オートコンプリート サンプル コード_jquery

コードをコピー コードは次のとおりです:

ただし、ブラウザーとの互換性はあります。IE6 および Firefox3.5 との互換性がテストされています。
まず autocomplate.js を見てください:
;(function ($) {
var) Index = - 1;
var timeId;
var cssOptions = {
"border": "1px 単色黒",
"background-color": "白"、
"位置" : "absolute" "/*,
"font": "normal Normal Lighter 14px 6px Times New Roman"*/
};
var defaults = {
width: "auto",
highlightColor: " #3399FE"、
unhighlightColor: "#FFFFFF"、
css: cssOptions、
dataType: "xml"、
paramName: "word"、
遅延: 500、
最大 : 20
};
var キー = {
UP: 38、
DOWN: 40、
DEL: 46、
TAB: 9、
ENTER : 13、
ESC: 27、
/*COMMA: 188、*/
PAGEUP: 33、
PAGEDOWN: 34、
BACKSPACE: 8、
A: 65、
Z: 90
};
$.fn.extend({
autocomplete: function (sUrl, settings) {
sUrl = (typeof sUrl === "string") ? sUrl : "";
var param = !this.attr("id") ?defaults.paramName : this.attr("id");
設定 = $.extend({}, デフォルト, {url: sUrl) , paramName: param }, settings);
var autoTip = this.autoTipTemplate(this, settings);
$this = this; >this.keyup (関数 (イベント) {
$this.keyOperator(event, autoTip, settings);
});
/*$("input[type=button]").click( function () {
$("#result").text("[" search.val() "] テキスト ボックスが送信されました。");
$("#auto").hide();
index = - 1;
});*/
return this.each(function () {
$ this.val();
});
},
autoTipTemplate: 関数 (入力、設定) {
var inputOffset = input.offset();

").css(settings.css).hide()
.css("top", inputOffset.top input.height() 5 "px")
.css("left ", inputOffset.left "px");
var space = $.browser.mozilla ? 2 : 6;//兼容浏览器
vartipWidth = (typeof settings.width === "string" && " auto") ? input.width() : settings.width;
autoTip.width(tipWidth space "px");
return autoTip;
},
select: function (target,index, settings, flag) {
var color = flag ? settings.unhighlightColor :
target.children("div").eq(index).css("background-color", color); 🎜>},
keyOperator: function (event, autoTip, settings) {
var evt = event ||
var autoNodes = autoTip.children("div"); kc = evt.keyCode;
var $this = this;
/*当用户按下字母または是退格键*/
if (kc >=keys.A && kc < ;= キー.Z || kc == key.BACKSPACE || kc == key.DEL) {
var wordText = this.val();
if (wordText.length != 0) {
var param = {};
param[settings.paramName] = wordText;
clearTimeout(timeId);
timeId = setTimeout(function () {
$.post(settings.url, param, function (data) {
var wordObj = $(data);
if (settings.dataType == "xml") {
var wordNodes = wordObj.find("word");
autoTip.html("");
wordNodes.each(function (i) {
var divNode = $ ("

").attr("id", i);
// 遍歴のメソッドを作成した div に追加し、その後その div を auto に追加します
divNode.html($ (this).text()).appendTo(autoTip);
//鼠标已进去，追加高亮
divNode.mousemove(function () {
//如果已经存在高亮，去掉高白色に変更
if (index != -1) {
autoTip.children("div").eq(index).css("background-color", settings.unhighlightColor);
index = $(this).attr("id");
$(this).css("background-color", settings.highlightColor)
// ネズミ标移出,取消高亮
divNode.mouseout(function () {
$(this).css("background-color", settings.unhighlightColor);
});明るい内容
divNode.click(function () {
$this.val($(this).text());
index = -1;
autoTip.hide();
});
});
if (wordNodes.length > 0) {
autoTip.show();
}インデックス = -1;
}
}
});
}、設定.遅延);
} else {
autoTip.hide();
インデックス = -1;
}
} else if (kc ==keys.UP || kc ==keys.DOWN) {/*当用户按下上下键*/
if (kc ==keys.UP) { //向上
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
インデックス--;
} else {
index = autoNodes.length - 1;
}
if (index == -1) {
index = autoNodes.length - 1;
}
autoNodes.eq(index).css("background-color", settings.highlightColor);
} else {//向下
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
}
インデックス ;
if (index == autoNodes.length) {
index = 0;
}
autoNodes.eq(index).css("background-color", settings.highlightColor);
}
} else if (kc ==keys.PAGEUP || kc ==keys.PAGEDOWN) {
event.preventDefault();
if (kc ==keys.PAGEUP) {
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
}
if (autoNodes.length > 0) {
index = 0;
autoNodes.eq(0).css("背景色", settings.highlightColor);
}
} else {
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
}
インデックス = autoNodes.length - 1;
autoNodes.eq(index).css("背景色", settings.highlightColor);
}
} else if (kc ==keys.ENTER) {
//回车键
//有高亮内容就补全情報
if (index != -1 ) {
$this.val(autoNodes.eq(index).text());
} else {//没有就隐藏
$("body").append($("

").text("文本框中的【" $this.val() "]));
$this.get(0).blur();
}
autoTip.hide();
インデックス = -1;
} else if (kc == key.ESC) {
autoTip.hide();
}
}
});
})(jQuery);


上の自動コンプレート ツールのいくつかの常用オプション:
index は選択提案の高輝度インデックスです。
timeId は、テキスト フィールドの入力時に使用され、setTimeout を使用します。 ajax 要求サービスがデータを取得する一方で返される時間;
cssOptions は自動的に提案される形式であり、ここではいくつかの考慮事項が示されています;

复制番号


代码如下:

var defaults = {
width: "auto",//デフォルトまたは自動的に設定される幅
highlightColor: "#3399FE",//ハイライト時の色
unhighlightColor: "# FFFFFF" ,//強調表示されていないときの色
css: cssOptions,
dataType: "xml",//Ajax リクエストの戻りデータ型
paramName: "word",//Ajax リクエスト パラメータ名、設定した場合テキスト フィールドの ID を指定し、この属性を使用します。
delay: 500, //テキスト フィールドが連続的に入力される場合、Ajax がサーバーにリクエストする頻度

keys は次のとおりです。キーボード キーに対応する値。
autocomplete は、ajax リクエストの URL を設定し、上記のデフォルトに表示されるパラメータを設定できる関数です。このメソッドはテキスト フィールドの値を返します。 🎜 >autoTipTemplate は入力時に表示されるプロンプト ボックスとプロンプト メニューであり、jquery オブジェクトを返します。
select はプロンプト メニューの強調表示されたオプションである選択プロンプト メニューです。ターゲットはもちろんターゲット オブジェクトです。インデックスはハイライトされるものです。明るいオプションの設定のインデックスは、デフォルトに含まれる
ハイライト カラー設定です。デフォルト オブジェクトのプロパティは、$.extend メソッドを通じて設定オブジェクトに割り当てられます。
keyOperator は、テキスト フィールドのキーボード操作です。これは、
の操作プロンプトに依存します。以下を参照してください。HTML コードを見て、オートコンプレート プラグインがどのように呼び出されるかを確認してください。

コードをコピーします コードは次のとおりです。 :

="hoojo_@126.com ">
/javascript" src="jslib /jquery-1.3.2.min.js">

;input type="text" />



🎜>


このコードを見てください。 AutocomplataWordServlet は、Ajax リクエスト サーバーによって返されるデータのタイプであり、自動プロンプト メニューの幅を設定できます。 。
使い方は比較的簡単です。もちろん、後で他の構成を追加することもできます。
コード スニペット




コードをコピー

コードは次のとおりです。 :

$(":text").autocomplete("AutocomplataWordServlet", { width: "auto", highlightColor: "#3355FE", unhighlightColor: " #FFFFcc", css: {border: "2px ソリッドレッド"}, dataType: "xml", paramName: "keyWord",

遅延: 300

});


これも可能です。
AutocomplataWordServlet のコードを見てください:




コードをコピーします

コードは次のとおりです:

パッケージ com.hoo.servlet; import java.io.IOException; import javax.servlet; http.HttpServlet; import javax.http.HttpServletRequest; @SuppressWarnings("serial") public class AutocomplataWordServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String word = request.getParameter("word")
request.setAttribute("word",
); //System.out.println(word) ;
request.getRequestDispatcher("word.jsp").forward(request, 応答)
}
public void doPost(HttpServletRequest request, HttpServletResponse response); 🎜>throws ServletException, IOException {
doGet(リクエスト, レスポンス)
}
}

;
何も言う必要はありません。クライアントのテキストフィールドで ajax リクエストのキーワードを取得し、jsp ページで単語フィルタリングを実行するだけです。ただし、クライアントで通常の
を使用したり、サーバーで通常のフィルタリングを使用したりすることもできます。
以下の word.jsp の内容を見てください:

コードをコピーします コードは次のとおりです:

<%@ ページ言語="java" contentType="text/xml; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http:/ /java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> ;


abstruct
<単語>/単語> ;/c:if> ;

<単語>出現 /c:if>

<単語>/単語> c:if>

apple :if>

boolean if>

break ;

bird
< c:if test="${fn:startsWith('blur', word)">
<単語 🎜>
call
>
class

/word>
;c:if test ="${fn:startsWith('dacnomania', word)}">
dacnomania
c:if test= "${fn:startsWith('document', word)">
document
Words>


は、jstl 形式のドキュメントを使用し、startsWith 関数と一致させると、xml コンテンツに表示され、上記の contentType="text/" が表示されます。 xml; charset=UTF-8"? text/xml です!ブラウザによっては、設定されていないと解析できない場合があることに注意してください。
著者: hoojo
ブログ: http://blog.csdn.net/IBM_hoojo

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。