jQuery是一種非常流行的JavaScript庫,用于簡化網頁開發。其中之一的方法是blur(),用于在失去焦點時執行指定的函數。同時,jQuery也提供了select()方法,可以通過它選擇指定的HTML元素。那么接下來,我們來看一下如何使用這兩種方法來實現類似自動完成的效果。
$(document).ready(function(){ $("#username").blur(function(){ var inputVal = $(this).val(); if(inputVal.length){ $.get("search.php?query=" + inputVal, function(data){ $("#result").html(data); }); } }); $("#result").on("click", "li", function(){ var resultVal = $(this).text(); $("#username").val(resultVal); $("#result").html(""); }); });
在上面的例子中,我們通過blur()方法來設置一個input元素在失去焦點時執行的函數。函數中,我們先獲取用戶輸入的值并進行判斷,如果值的長度不為零,就通過jQuery的get()方法來向服務器發送一個請求,并將查詢結果展示在一個具有id為“result”的元素中。jQuery的on()方法則用于綁定一個被點擊元素的事件,這里我們綁定了“result”元素下所有的“li”元素。當用戶點擊某個查詢結果時,我們再次使用jQuery獲取到相應的值,將其填入input元素內,并將查詢結果展示元素的內容清空。這篇文章只是簡單介紹了如何使用blu()和select()方法來實現一個小型的自動完成程序和事件綁定。在實際項目中,您可能需要根據具體需求進行相應的修改和完善。
上一篇兩個表格怎么合并css
下一篇jquery a禁止點擊