フロントエンドが入力ボックスinput入力を実現すると、バックグラウンドクエリが呼び出されます.
14093 ワード
ここ数日、bootstrapフレームワークに基づいて開発されたフロントエンドhtmlページを作成しました.入力ボックスにアルファベットや文字を入力すると、ドロップダウンボックスが自動的にファジイクエリの情報をリフレッシュする必要があります.最初はキーボードのキー入力を監視し、アルファベットを1文字入力するたびに、非同期要求をサービス側に送信してデータクエリーを行うことを考えていました.しかし、このような方法では、このモニタリングがグローバルであること、つまりページがリフレッシュされた後、キーボードを押すと、非同期要求を呼び出してデータを送信することができ、私の設計構想とは違います.それから私は多くの資料を調べて、ある入力ボックスの中の変化を監視する方法があることを発見しました.ボックスの内容が変化すれば、関数をトリガーします.具体的には以下のように実現する.まずフロントエンドhtmlを書き、フロントエンド開発時にjqueryとbootstrap関連コンポーネントを導入します.
は が チャネルの ボックスをロックする にドロップダウンコンポーネント(bootstrapに できるケースがある)をポップアップし、 にバックグラウンドのように を し、 のデータ を する がある. なjsの は の りである://チャネル の を し、チャネルの のアルファベットに づいてチャネル を に し、ドロップダウンボックスをロードする.チャネルドロップダウンメニューをクリア*/ function delectChannelMenu(){
}ロードチャネルメニュー @param objチャネルオブジェクト */ function LoadChannelMenu(obj,pageCount){
}
は が チャネルの ボックスをロックする にドロップダウンコンポーネント(bootstrapに できるケースがある)をポップアップし、 にバックグラウンドのように を し、 のデータ を する がある. なjsの は の りである://チャネル の を し、チャネルの のアルファベットに づいてチャネル を に し、ドロップダウンボックスをロードする.
$("#channelText").bind('input propertychange',function(){
delectChannelMenu();
getPageChannelMenu(currentpage,$("#channelText").val());
});```
jquery bind(type,[data],fn) ， 。type ```input propertychange``` input fn， ， 。 :var count=$('#channel-menu').children().length;
for(var i=0;i}
` *
*/
function getPageChannelMenu(currentpage,channelCode){
//
var url = '/NCPI/thridPlatform_getPageMsg.do';
$.ajax({
type:"POST",
url:url,
// 。
data: {currentPage:currentpage,channelCode:channelCode},
async :false,
success:function(msg){
pageCount=msg.pageCount;
LoadChannelMenu(msg.thridPlatformList,msg.pageCount);
}
});
}```var menuObj = $('#paging').prev();
for(var i=0;i'+obj[i].channelCode+'|'+obj[i].channelName+'');
}
var htmlObj="";
for(var i=1;i<=pageCount;i++){
htmlObj+=''+i+' '
if(i==5){
break;
}
}
$('#next').parent().before(htmlObj);
$('a').click(function(){
var id=$(this).parent().parent().parent().attr("id");
if(id=='channelNoInputBox'){
//
$('#channelText').val($(this).html());
$('#channelNo').val($(this).next().val());
}
});
$("ul.dropdown-menu").on("click", "[data-stopPropagation]", function(e) {
e.stopPropagation();
}); }
`は、 ボックスに しながらデータを に することを することができる.