/* Infomation ========================================================================================== jQuery Plugin Name : jquery.ajaxSuggest Version : 1.5 Update : 2010-12-12 Author : sutara_lumpur Author-URI : http://d.hatena.ne.jp/sutara_lumpur/20100718/1279420832 License : MIT License (http://www.opensource.org/licenses/mit-license.php) Based-on : Uses code and techniques from following libraries... * jquery.suggest 1.1 Author : Peter Vulgaris Author-URI : http://www.vulgarisoip.com/ ========================================================================================== Contents ========================================================================================== 01. 変数・部品の定義 02. イベントハンドラ 03. Suggest用メソッド - 未分類 04. Suggest用メソッド - Ajax関連 05. Suggest用メソッド - 候補リスト関連 06. 処理の始まり ========================================================================================== */ (function($) { $.ajaxSuggest = function(input_obj, source, options) { //Ajaxにおけるキャッシュを無効にする $.ajaxSetup({cache: false}); //================================================================================ // 01. 変数・部品の定義 //-------------------------------------------------------------------------------- //********************************************** //変数の初期化 //********************************************** var show_hide = false; //候補を、タイマー処理で表示するかどうかの予約 var timer_show_hide = false; //タイマー。フォーカスが外れた後、候補を非表示にするか var timer_val_change = false; //タイマー変数(一定時間ごとに入力値の変化を監視) var reserve_click = false; //マウスのキーを押し続ける操作に対応するためmousedownを検知 var $xhr = false; //XMLHttpオブジェクトを格納 var prev_value = ''; //Suggestの、以前の値 var user_value = ''; //ユーザが入力したもともとの値 var is_select = false; //キー入力ではなく、候補選択で$input_objの値が変わったか？ var key_select = false; //キーで候補移動したか？？ //********************************************** //部品の定義 //********************************************** $(input_obj).attr('autocomplete','off'); var $results = $('') .addClass(options.results_class) .appendTo('body'); //================================================================================ // 02. イベントハンドラ //-------------------------------------------------------------------------------- //********************************************** //テキスト入力エリア //********************************************** //前処理(クロスブラウザ用) if($.support.checkOn && $.support.cssFloat){ $(input_obj).keypress(processKey); }else{ $(input_obj).keydown(processKey); } $(input_obj).focus(function() { show_hide = true; checkValChange(); }); $(input_obj).blur(function(ev) { //入力値の監視を中止 clearTimeout(timer_val_change); //候補消去を予約 show_hide = false; //消去予約タイマーをセット checkShowHide(); }); $(input_obj).mousedown(function(ev) { reserve_click = true; //消去予約タイマーを中止 clearTimeout(timer_show_hide); ev.stopPropagation(); }); $(input_obj).mouseup(function(ev) { $(input_obj).focus(); reserve_click = false; ev.stopPropagation(); }); //********************************************** //body全体 //********************************************** $('body').mouseup(function() { //消去予約タイマーを中止 clearTimeout(timer_show_hide); //候補を消去する show_hide = false; hideResult(); }); //================================================================================ // 03. Suggest用メソッド - 未分類 //-------------------------------------------------------------------------------- //********************************************** //タイマーによる入力値変化監視 //********************************************** function checkValChange() { timer_val_change = setTimeout(isChange,500); function isChange() { var now_value = $(input_obj).val(); if(!now_value){ hideResult(); }else if(now_value != prev_value && !is_select) { suggest(); } is_select = false; prev_value = now_value; //ユーザがもともと入力していた値を格納 if(!getCurrentResult()) user_value = $(input_obj).val(); //一定時間ごとの監視を再開 checkValChange(); } } //********************************************** //候補の消去を本当に実行するか判断 //********************************************** function checkShowHide() { timer_show_hide = setTimeout(function() { if (show_hide == false && reserve_click == false){ hideResult(); } },500); } //********************************************** //キー入力への対応 //********************************************** function processKey(e) { if ( (/27$|38$|40$|^9$/.test(e.keyCode) && $results.is(':visible')) || (/^13$|^9$/.test(e.keyCode) && getCurrentResult()) ) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); e.cancelBubble = true; e.returnValue = false; switch(e.keyCode) { case 38: // up key_select = true; prevResult(); break; case 40: // down key_select = true; nextResult(); break; case 9: // tab hideResult(); break; case 13: // return selectCurrentResult(true); break; case 27: // escape hideResult(); break; } } else { checkValChange(); } } //================================================================================ // 04. Suggest用メソッド - Ajax関連 //-------------------------------------------------------------------------------- //********************************************** //Ajaxの中断 //********************************************** function abortAjax() { if ($xhr){ $xhr.abort(); $xhr = false; } } //********************************************** //Ajax通信 //********************************************** function suggest(){ if($(input_obj).val().search(/^[ 　\n\r\t]*$/) > -1) return; //Ajax通信をキャンセル abortAjax(); //ここでAjax通信を行っている $xhr = $.getJSON( options.source, { 'q_word' : $(input_obj).val(), 'database' : options.database, 'sub_info' : options.sub_info, 'and_or' : options.and_or, 'limit' : options.limit, 'order_by' : options.order_by }, function(json_data){ if(!json_data || json_data.length < 1){ hideResult(); }else{ displayItems(json_data); } } ); } //================================================================================ // 05. Suggest用メソッド - 候補リスト関連 //-------------------------------------------------------------------------------- //********************************************** //候補一覧の