1. jquery-latest.js、JSuggest.js、および JSuggest.css をダウンロードします。
JSuggest.jsのソースコードは以下のとおりです
次のようにコードをコピーします。
/**
*
* 説明: JSuggest ドロップダウン プロンプト ボックス
*/
関数 JSuggest(){
// DIV ドロップダウン ボックス
this.div = null;
//DIV の下の ul
this.ul = null;
//テキスト入力ボックス
this.input = null;
// 現在の DIV によって選択された LI オブジェクト
this.current_li = null;
/**
* ドロップダウン プロンプト ボックスを非表示にする
*/
this.hide = function(){
this.div.style.visibility = "非表示";
}
/**
* ドロップダウンプロンプトボックスを表示
*/
this.show = function(){
this.div.style.visibility = "可視";
}
/**
* ドロップダウン プロンプト ボックスのステータス
*/
this.status = function(){
if (this.div.style.visibility == "visible"){
true を返します。
}
false を返します。
}
/**
* 現在の DIV で選択されている LI を設定します
*/
this.setCurrent_li = function(li, obj){
var co = obj.current_li;
if (co != null){
co.className = "";
}
li.className = "li_index";
obj.current_li = li;
}
/**
* 提案の初期化
*
* input_id: 入力ボックスのID
* defHeight: ドロップダウン プロンプト ボックスの高さ (指定することもできません)
*/
this.init = function(input_id, defHeight){
this.input = document.getElementById(input_id);
//this.input.autocomplete = "オフ";
var left = this.input.offsetLeft;
var top = this.input.offsetTop;
var width = this.input.offsetWidth;
var height = this.input.offsetHeight;
var p=this.input.offsetParent;
while(p!= null){
left+=p.offsetLeft;
トップ+=p.オフセットトップ;
p=p.offsetParent;
}
トップ+= 高さ;
if(defHeight==null || defHeight==0){
高さ = 150;
}それ以外{
高さ = デフォルトの高さ;
}
this.input.value = "";
var obj = これ;
this.input.onkeydown = function(evt){
obj.onkeydown(evt, obj);
}
this.div = document.createElement("div");
this.div.style.width = 幅 + "px";
this.div.style.height = 高さ + "ピクセル";
this.div.style.left = left + "px";
this.div.style.top = トップ + "px";
this.ul = document.createElement("ul");
this.div.appendChild(this.ul);
this.div.className = "jsuggest";
document.body.appendChild(this.div);
}
/**
* DIV の下の UL のすべての LI を削除します
*/
this.remove = function(){
this.current_li = null;
while(this.removeLI());
}
/**
* DIV の下の UL の LI を削除
*/
this.removeLI = function(){
var ノード = this.ul.childNodes;
for(ノード内の変数n){
if (ノード[n] != null && ノード[n].nodeName == "LI"){
// アラート(node[n].innerHTML);
this.ul.removeChild(node[n]);
true を返します。
}
}
false を返します。
}
/**
* DIV に LI を作成します
*/
this.create = 関数(項目){
this.remove();
var li_item = items.split(",");
for(li_item の変数 i){
//アラート(li_item[i]);
var li = document.createElement("li");
li.innerHTML = li_item[i];
var obj = これ;
li.onmousedown = function(){
obj.onmousedown(this, obj);
}
li.onmouseover = this.onmouseover;
li.onmouseout = this.onmouseout;
this.ul.appendChild(li);
}
this.show();
}
/**
* テキストボックス押下イベント
*/
this.onkeydown = function(evt, obj){
if (!obj.status()){
false を返します。
}
if (!evt && window.event)
{
evt = ウィンドウ.イベント;
}
var key = evt.keyCode;
//var KEYUP = 38;
//var キーダウン = 40;
//var KEYENTER = 13;
var ob = obj;
if (キー == 38){
obj.upKeySelected();
}else if (キー == 40){
obj.downKeySelected();
}else if (キー == 13 || キー == 27){
obj.hide();
}
}
this.getCurrentLiIndex = function(){
if(this.current_li == null){
-1 を返します。
}
var ノード = this.ul.childNodes;
for(ノード内の変数n){
if (node[n].nodeName == "LI"){
if(node[n] == this.current_li){
n を返します。
}
}
}
}
this.getLi = 関数(インデックス){
var ノード = this.ul.childNodes;
for(ノード内の変数n){
if (node[n].nodeName == "LI" && n == インデックス){
this.setCurrent_li(node[n], this);
ノード[n]を返します;
}
}
}
this.upKeySelected = function(){
var num = this.getCurrentLiIndex();
if (数値 != -1 && 数値 > 0){
番号--;
var ノード = this.getLi(num);
this.setCurrent_li(ノード, this);
this.input.value = ノード.innerHTML;
}
}
this.downKeySelected = function(obj){
var num = this.getCurrentLiIndex();
if (num == -1){
数値 = 0;
}それ以外 {
数値++;
if (num >= this.ul.childNodes.length)は false を返します。
}
var ノード = this.getLi(num);
this.setCurrent_li(ノード, this);
this.input.value = ノード.innerHTML;
}
/**
* DIV マウスプレスイベント
*/
this.onmousedown = function(thiz, obj){
obj.setCurrent_li(thiz, obj);
obj.input.value = thisz.innerHTML;
obj.hide();
}
/**
* DIV マウス移動イベント
*/
this.onmouseover = function(){
if (this.className != "li_index"){
this.className = "li_check";
}
}
/**
* DIV マウスアウトイベント
*/
this.onmouseout = function(){
if (this.className == "li_check"){
this.className = "";
}
}
}
var jsuggest = 新しい JSuggest();
2.jspページ
次のようにコードをコピーします。
<input id="text" name="text" type="text" onkeyup="go(event, this.value);"/>
<script type="text/javascript">
j(ドキュメント).ready(function(){
//JSUGGESTを初期化する
jsuggest.init("テキスト");
//または、次のメソッドを使用してドロップダウン ボックスの高さを設定します
//jsuggest.init("テキスト",200);
})
関数 go(イベント, 値){
イベント = イベント イベント : (ウィンドウ.イベント ? ウィンドウ.イベント : 引数[0]);
var url = "url?suggestInput="+encodeURIComponent(value);//url は特定のアクションまたは JSP アドレスなどであり、戻り値はカンマ区切りの文字列です
goSuggestInput(イベント,url,値);
}
function goSuggestInput(evnet,url,value){
if (値 == ""){
//入力ボックスが空の場合はドロップダウン ボックスを非表示にする
jsuggest.hide();
false を返します。
}
// evt が有効なイベントであることを確認してください
if (!evnet && window.event)
{
evnet = ウィンドウ.イベント;
}
var key = evnet.keyCode;
if (キー == 38 || キー == 40 || キー == 13 || キー == 27){
false を返します。
}
j.ajax({
タイプ:「投稿」、
URL:URL、
データ型: "テキスト",
キャッシュ: "false"、
beforeSend: function(XMLHttpRequest){
}、
成功: function(data, textStatus){
//ドロップダウンボックスにデータを追加します
jsuggest.create(データ);
}、
完了: function(XMLHttpRequest, textStatus){
}、
エラー: function(){
alert("申し訳ありません、サーバーがビジー状態です!");
}
});
}
</script>