jQuery isfous是一種輕松實現輸入框搜索自動補全功能的jQuery插件。該插件可以幫助我們在用戶輸入關鍵字時,實時搜索并自動補全相關的提示信息,從而提高網站的易用性和用戶體驗。以下是使用jQuery isfous實現輸入框搜索自動補全的示例代碼:
<!-- 引入jQuery庫和isfous插件 --> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.isfous.min.js"></script> <!-- HTML部分 --> <input type="text" id="searchInput" placeholder="搜索..." /> <ul id="searchResult"></ul> <!-- JavaScript部分 --> <script type="text/javascript"> $(function(){ $('#searchInput').isfous({ url: 'search.php', //后臺搜索接口URL data: { }, //傳遞給后臺搜索接口的參數 showNum: 5, //最大顯示搜索結果數量 showDelay: 300, //顯示搜索結果的延時 loadingHtml: '<li>正在搜索...</li>', //顯示“正在搜索”時的HTML noResultHtml: '<li>未找到相關內容</li>', //無搜索結果時的HTML matchElement: function(item){ //自定義生成搜索結果HTML的函數 return '<li>' + item + '</li>'; }, onInputClick: function(){ //輸入框被點擊時回調函數 }, onLoadData: function(data){ //搜索結果獲取成功時回調函數 }, onError: function(errmsg){ //搜索出錯時回調函數 } }); }); </script>
通過以上示例代碼,我們可以輕松地實現輸入框搜索自動補全的功能,為用戶提供更好的搜索體驗。當然,該插件還有更多高級用法和配置選項,有興趣的讀者可以查看jQuery isfous官方文檔。