Baidu のようなキーワード一致検索 example_jquery

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

关键词匹配搜索

搜索

<スクリプトタイプ="text/javascript">

//検索入力ボックスの入力プロンプト js クラスを実装します
function oSearchSuggest(searchFuc){
var input = $('#gover_search_key');
var assignWrap = $('#gov_search_suggest');
var key = "";
var init = function(){
input.bind('keyup',sendKeyWord); input.bind('blur',function(){setTimeout(hideSuggest,100);})
}
var hideSuggest = function(){
suggestWrap.hide()
//リクエストを送信し、キーワードに基づいて背景をクエリします
var sendKeyWord = function(event){

//キーボード選択ドロップダウン項目
if(suggestWrap.css( 'display')= ='block'&&event.keyCode == 38||event.keyCode == 40){
var current = assignWrap.find('li.hover');
if(event.keyCode == 38){
if(current.length>0){
var prevLi = current.removeClass('hover').prev();
if(prevLi.length>0){
prevLi.addClass( 'hover');
input.val(prevLi.html());
}
}else{
var last = assignWrap.find('li:last') ;
last .addClass('hover');
input.val(last.html());

}else if(event.keyCode == 40){ 🎜>if(current.length>0){
var nextLi = current.removeClass('hover').next();
if(nextLi.length>0){
nextLi.addClass(' hover');
input.val(nextLi.html());
}
}else{
var first = assignWrap.find('li:first'); addClass('hover' );
input.val(first.html());
}
}

//入力文字
}else{
varText = $.trim(input.val());
if(valText ==''||valText==key){
return;
searchFuc(valText); key = valText;
}

}
//リクエストが戻ったら、データ表示を実行します
this.dataDisplay = function(data){
if(data.length<= 0){
assignWrap.hide();
return
}

// 検索ボックスのドロップダウン候補表示バーにエントリを追加し、
var li; 🎜>var tmpFrag = document.createDocumentFragment ();
suggestWrap.find('ul').html('');
for(var i=0; ili = document.createElement(' LI');
li.innerHTML = data[i];
}
suggestWrap.find('ul') append(tmpFrag);
assignWrap.show();

//ドロップダウン オプションのマウス イベントをバインド
suggestWrap.find('li').hover(function(){
suggestWrap.find('li') .removeClass('hover');
$(this).addClass('hover');

},function(){
$(this ).removeClass('hover');
}).bind('click',function(){
$(this).find("span").remove();
input.val (this.innerHTML);
assignWrap.hide();
}
};

//JS をインスタンス化します。プロンプト、およびクエリ操作を実行するときにパラメータが必要です 呼び出される関数名
var searchSuggest = new oSearchSuggest(sendKeyWordToBack)

//これは、Ajax クエリ リクエストをバックグラウンドに送信して返すモック関数ですクエリ結果データがフロントデスク JS に渡され、フロントエンド JS がデータを表示します。この関数はプログラマによって変更され、クエリ要求を実装します
//パラメータは文字列であり、検索入力ボックスの現在の内容です
function sendKeyWordToBack(keyword){
/* var obj = {
"キーワード" : キーワード
};
$.ajax({
type: "POST",
url: "${ctx}/front/suqiu2/search/prompt-キーワード.アクション ",
async:false,
data: obj,
dataType: "json",
success: function(data){
//var json = eval("( " data " )");
var key=data.split(",");
var aData = [];
for(var i=0;i //以下は、入力に基づいて検索結果を返すシミュレーション効果コードです。実際のデータはバックグラウンドから返されます。
if(key[i]!=""){
aData.push( key[i]);
}
}
// 返されたデータを、検索入力ボックスを実装する入力プロンプト js クラスに渡します
searchSuggest.dataDisplay(aData);
🎜>}); */

// 以下は、入力に基づいて検索結果を返すためのシミュレーション効果のコードです。
var aData = <🎜; >aData.push(' 約 100' キーワード 'return data 1');
aData.push('約 200' キーワード '戻りデータ 2') ;
aData.push('約 100' キーワード '戻りデータ 3'); >aData.push('約 50,000' キーワード '返されるデータ 4');
aData.push('約 1044' キーワード ' 2012 は true');
aData.push('約 100' キーワード '2012 は false'); >aData.push( '約 100' キーワード '2012 は true');
aData.push('about) 100 ' キーワード '2012 is false')
// 返されたデータを検索入力ボックスの入力プロンプトを実装する js クラスに渡します
searchSuggest.dataDisplay(aData); >}