Improve channel search UX: Enter-to-search, loading/empty states

The search box only worked via mouse click on the Search button (no
keypress handler), and a search returning zero matches or failing
silently left the previous results or an empty panel with no
feedback. Add Enter-key submission and show a spinner while
searching, "No channels found" on empty results, and an error
message on request failure. Also fixes a dead '#list_channels'
selector (the actual container is '#listChannels') that silently
did nothing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ubuntu
2026-08-30 23:43:15 +00:00
co-authored by Claude Sonnet 5
parent 2eaa0fee64
commit 685bbb1683
+19 -3
View File
@@ -1881,6 +1881,13 @@
get_search_channel(1) get_search_channel(1)
}) })
$('#input_search').on('keypress', function(e){
if (e.which === 13) {
e.preventDefault();
get_search_channel(1);
}
})
$('#btn_initdb').click(function(){ $('#btn_initdb').click(function(){
$.get('init_db').done(function(data){ $.get('init_db').done(function(data){
window.location.href = "/" window.location.href = "/"
@@ -2065,17 +2072,26 @@
function get_search_channel(num_page) { function get_search_channel(num_page) {
var keyword = $('#input_search').val() var keyword = $('#input_search').val()
if (keyword.length>0) { if (keyword.length>0) {
$('#pagination-container').empty();
$('#listChannels').show().html('<div class="text-center text-muted py-4"><i class="fas fa-spinner fa-spin"></i> Searching...</div>');
$.post('list_channel', {keyword:encodeURIComponent(keyword), num_page:num_page}).done(function(payload){ $.post('list_channel', {keyword:encodeURIComponent(keyword), num_page:num_page}).done(function(payload){
$('#list_channels').html('')
var html =''
num_total_page = payload.num_total_page num_total_page = payload.num_total_page
current_page = payload.current_page current_page = payload.current_page
result_search = payload.data result_search = payload.data
console.log(num_total_page, current_page) console.log(num_total_page, current_page)
renderPagination(num_total_page, current_page);
if (!result_search || result_search.length === 0) {
$('#pagination-container').empty();
$('#listChannels').html('<div class="text-center text-muted py-4">No channels found.</div>');
return;
}
renderPagination(num_total_page, current_page);
displayResult() displayResult()
lazyLoad(); lazyLoad();
}).fail(function(){
$('#pagination-container').empty();
$('#listChannels').html('<div class="text-center text-danger py-4">Search failed. Please try again.</div>');
}) })
} }
} }