前端實現輸入框input輸入時，呼叫後台查詢。

這幾天做了乙個前端html頁面，基於bootstrap框架開發，裡面有個需求就是在輸入框中輸入字母或者文字時，下拉框自動重新整理模糊查詢出的資訊。最初我的想法是監控鍵盤上的按鍵輸入，每次輸入乙個字母後，傳送非同步請求至服務端進行資料查詢。但是後來發現，這種方式做出來會有乙個問題，就是這個監控是全域性的，也就是頁面重新整理後，只要你按鍵盤，就會呼叫非同步請求傳送資料，這樣跟我的設計思路是有出入的。

然後我查了很多資料，發現有一種方式可以監控某個輸入框體中的變化，只要框體內容有變化，就會觸發函式。具體實現如下。

首先先寫好前端html，前端開發時先引入jquery和bootstrap相關元件：

保單號產品** 發票抬頭納稅人識別號投保渠道發票型別備註確定× 電子發票資訊電子發票基本資訊引數引數內容保單號產品** 投保渠道發票型別納稅人識別號發票抬頭備註關閉

我需要在焦點鎖定投保渠道的輸入框時彈出下拉元件（bootstrap中有案例可以直接使用），在輸入時像後台傳送非同步請求，獲取想要的資料資訊，具體js的實現方法如下：

//監控渠道資訊輸入狀態，根據渠道開頭字母模糊查詢渠道資訊並載入下拉框。

$("#channeltext").bind('input propertychange',function());```
jquery中的bind(type,[data],fn)方法，為每個匹配元素的特定事件繫結事件處理函式。type為```input propertychange```就是譯為當input標籤中的屬性發生改變時觸發函式fn，觸發後先執行刪除選單中的內容，再更新選單中的內容。兩個方法具體如下:

function delectchannelmenu()`

* 傳送請求獲取渠道
*/function getpagechannelmenu(currentpage,channelcode),
async :false,  
success:function(msg)      
});}```

function loadchannelmenu(obj,pagecount)

var htmlobj="";

for(var i=1;i<=pagecount;i++)

}$('#next').parent().before(htmlobj);

$('a').click(function()

});$("ul.dropdown-menu").on("click", "[data-stoppropagation]", function(e) );}`

這樣就可以實現在輸入框中輸入的同時對資料進行模糊查詢。

前端實現輸入框input輸入時，呼叫後台查詢。

input 輸入框限制

input輸入框輸入金額校驗

限制 input 輸入框只能輸入數字

前端實現輸入框input輸入時，呼叫後台查詢。

input 輸入框限制

input輸入框輸入金額校驗

限制 input 輸入框只能輸入數字

相關推薦