Woonghee Cho Woonghee Cho - 16 days ago 5
HTML Question

implementing search ajax function

I am trying to make search function based on Ajax/Jquery.

My web app shows the data of service requests from the database. I want to make searchbar for my app as follows:


  1. show all service request on the table initially.

  2. If something is typed on the searchbar, it searches data and load those data to the table.

  3. Finally if user deletes anyword from searchbar it will show all data as stated on No.1



I managed doing second and third function but I am having issues with the first one.

$(document).ready(function(){
$('#search_text').keyup(function(){
var txt = $(this).val();
if(txt != '') {
$.ajax({
url:"ajax/fetchRequests.php",
method:"post",
data:{search:txt},
dataType:"text",
success:function(data) {
$('#result').html(data);
}
});
}
else if(txt == '') {
$.get("ajax/readRequests.php", {}, function (data, status) {
$("#result").html(data);
});
}
});
});


Here is another script that i have worked on trying:

$(document).ready(function(){
var txt = $('#search_text').val();

if(txt != ''){
$.ajax({
url:"ajax/fetchRequests.php",
method:"post",
data:{search:txt},
dataType:"text",
success:function(data) {
$('#result').html(data);
}
});
}
else if(txt == '') {
$.get("ajax/readRequests.php", {}, function (data, status) {
$("#result").html(data);
});
}
});


All my features are working except for the search functions. Any tips or critics are welcome, thank you very much in advance.

Answer

I suggest you do two things, 1) use the suggested .on() and 2) use only one ajax function to simplify things. The idea is to funnel your calls through one function so that you know if something fails, it's not because you messed up the ajax part of the script:

// Create a generic ajax function so you can easily re-use it
function fetchResults($,path,method,data,func)
    {
        $.ajax({  
            url: path,  
            type: method,  
            data: data,  
            success:function(response) {
                func(response);
            }
        }); 
    }
// Create a simple function to return your proper path
function getDefaultPath(type)
    {
        return 'ajax/'+type+'Requests.php';
    }

$(document).ready(function(){
    // When the document is ready, run the read ajax
    fetchResults($, getDefaultPath('read'), 'post', false, function(response) {
        $('#result').html(response);
    });
    // On keyup
    $(this).on('keyup','#search_text',function(){
        // Get the value either way
        var getText =   $(this).val();
        // If empty, use "read" else use "fetch"
        var setPath =   (!getText)? 'read' : 'fetch';
        // Choose method, though I think post would be better to use in both instances...
        var type    =   (!getText)? 'post' : 'get';
        // Run the keyup function, this time with dynamic arguments
        fetchResults($, getDefaultPath(setPath), type, { search: getText },function(response) {
            $('#result').html(response);
        });
    });
 });
Comments