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:
co-authored by
Claude Sonnet 5
parent
2eaa0fee64
commit
685bbb1683
+20
-4
@@ -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>');
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user