jQuery jsuggest是一個輕量級的jQuery插件,用于實現搜索框自動提示功能。它可以在用戶輸入時快速過濾出與輸入相匹配的選項,并在下拉菜單中展示出來,提供給用戶選擇。
// jsuggest的基本用法 $(selector).jsuggest({ data: ['Option 1', 'Option 2', 'Option 3'], onSelect: function(selected) { console.log('You selected: ', selected); } });
在使用jsuggest時,需要傳入一個包含選項的數據數組。比如上例中的data就包含了3個選項。當用戶在搜索框中輸入文字時,jsuggest會自動過濾出匹配的選項,并將它們展示在下拉菜單中。當用戶選擇一個選項時,會觸發onSelect回調函數,可以在這個函數中對選中的選項進行處理。
// jsuggest的高級用法 $(selector).jsuggest({ dataUrl: '/api/options', ajaxOptions: { dataType: 'json' }, onSelect: function(selected) { console.log('You selected: ', selected); } });
除了傳入靜態數據數組外,jsuggest還支持從服務端獲取數據。設置dataUrl參數為服務端API的URL即可。jsuggest會自動發起AJAX請求獲取數據,并根據ajaxOptions參數指定的選項進行請求配置。當服務端返回數據后,jsuggest會自動解析并展示在下拉菜單中。
除了基本的用法外,jsuggest還支持自定義選項模板、下拉菜單樣式、搜索框行為(如控制按鍵延遲等)等高級功能。詳情請查看jsuggest的官方文檔。
上一篇css書籍進階