Trouble with the Ajax search feature in Laravel

Question

Trouble with the Ajax search feature in Laravel

No data is currently being displayed;

console:

finished loading: GET "http://todolist.local/teachers/search?text=a".

I am attempting to display results in the tbody when a user types something in the search bar.

Ajax code:

<script>
$(document).ready(function(){
        $('#searchname').on('keyup', function(){
                var text = $('#searchname').val();
                $.ajax({
                        type:"GET",
                        url: 'teachers/search',
                        data: {text: $('#searchname').val()},
                        success:function(data){
$('tbody').html(data);
}
                });
        });
});
</script>

web.php:

Route::get('/search', 'TeachersController@ajaxsearch');

Search Controller:

public function ajaxsearch(){
$searchname = Input::get ( 'searchname' );
  if($searchname != ""){
  $teacher = Teacher::where ( 'efirst', 'LIKE', '%' . $searchname . '%' )->paginate(10);
  return response()->json($teacher);
}
}

view:

<div class="input-group stylish-input-group">
                        <input type="text" id="searchname" name="searchname" class="form-control"  placeholder="Search..." >
                   <span class="input-group-addon">
                            <button type="submit" class="btn btn-primary">
                                <span class="glyphicon glyphicon-search">Search</span>
                            </button>
                        </span>
                    </div>

ajax laravel

Answer 1

Answer №1

Here's the solution you've been looking for.

HTML:

  <div id="searchData"></div>

JS:

$(function(){
    $('#searchInput').on('keyup', function(){
        $.get('/results/search/'+$(this).val(), function(response){
            $('#searchData').html(response);
        });
    });
});

Controller:

public function fetchResults(string $value = null){
    return $value ? Result::whereRaw("UPPER(result_name) LIKE '%".strtoupper($value)."%'")->paginate(10) : [];
}

Route:

Route::get('/results/search/{value?}', 'ResultsController@fetchResults');

UPDATED VERSION POST DISCUSSION

HTML:

  <ul id="searchData"></ul>

JS:

$(function(){
    var $searchData=$('#searchData');
    $('#searchInput').on('keyup', function(){
        $.get('/results/search/'+$(this).val(), function(results){
            $searchData.empty();
            for (var i=0; i<results.length; i++){
                $searchData.append('<li>'+results[i].result_name+' <a href="/results/edit/'+results[i].id+'">edit</a></li>');
            }
        });
    });
});

Controller:

public function fetchResults(string $value = null){
    return $value ? Result::select('id','result_name')->whereRaw("UPPER(result_name) LIKE '".strtoupper($value)."%'")->offset(0)->limit(10)->get() : [];
}

Route:

Route::get('/results/search/{value?}', 'ResultsController@fetchResults');

Answer 2

Here's the solution you've been looking for.

HTML:

  <div id="searchData"></div>

JS:

$(function(){
    $('#searchInput').on('keyup', function(){
        $.get('/results/search/'+$(this).val(), function(response){
            $('#searchData').html(response);
        });
    });
});

Controller:

public function fetchResults(string $value = null){
    return $value ? Result::whereRaw("UPPER(result_name) LIKE '%".strtoupper($value)."%'")->paginate(10) : [];
}

Route:

Route::get('/results/search/{value?}', 'ResultsController@fetchResults');

UPDATED VERSION POST DISCUSSION

HTML:

  <ul id="searchData"></ul>

JS:

$(function(){
    var $searchData=$('#searchData');
    $('#searchInput').on('keyup', function(){
        $.get('/results/search/'+$(this).val(), function(results){
            $searchData.empty();
            for (var i=0; i<results.length; i++){
                $searchData.append('<li>'+results[i].result_name+' <a href="/results/edit/'+results[i].id+'">edit</a></li>');
            }
        });
    });
});

Controller:

public function fetchResults(string $value = null){
    return $value ? Result::select('id','result_name')->whereRaw("UPPER(result_name) LIKE '".strtoupper($value)."%'")->offset(0)->limit(10)->get() : [];
}

Route:

Route::get('/results/search/{value?}', 'ResultsController@fetchResults');

Answer 3

Answer №2

Have you heard of the error function in jQuery Ajax?

$(document).ready(function(){
        $('#searchname').on('keyup', function(){
                var text = $('#searchname').val();
                $.ajax({
                        type:"GET",
                        url: 'teachers/search',
                        data: {text: $('#searchname').val()},
                        success:function(data){$('tbody').html(data);},
                        error:function(jqXHR){alert(jqXHR.status);} 
                });
        });
});

You should give this code snippet a try. It will display an error message if one occurs, and remember to enclose text in inverted commas as key value pairs.

Answer 4

Have you heard of the error function in jQuery Ajax?

$(document).ready(function(){
        $('#searchname').on('keyup', function(){
                var text = $('#searchname').val();
                $.ajax({
                        type:"GET",
                        url: 'teachers/search',
                        data: {text: $('#searchname').val()},
                        success:function(data){$('tbody').html(data);},
                        error:function(jqXHR){alert(jqXHR.status);} 
                });
        });
});

You should give this code snippet a try. It will display an error message if one occurs, and remember to enclose text in inverted commas as key value pairs.

Answer 5

Answer №3

You need to make a correction in your search controller by using the correct input name. Here is the corrected code:

public function ajaxsearch(){
$searchname = Input::get ( 'text' );
  if($searchname != ""){
  $teacher = Teacher::where ( 'efirst', 'LIKE', '%' . $searchname . '%' )->paginate(10);
  return response()->json($teacher);
}
}

Answer 6

You need to make a correction in your search controller by using the correct input name. Here is the corrected code:

public function ajaxsearch(){
$searchname = Input::get ( 'text' );
  if($searchname != ""){
  $teacher = Teacher::where ( 'efirst', 'LIKE', '%' . $searchname . '%' )->paginate(10);
  return response()->json($teacher);
}
}

Answer 7

Answer №4

To begin with, try visiting the URL manually and entering parameters.

If you receive a response, it indicates that your PHP is functioning correctly.

If you encounter an error, it means you are using the GET method. Be sure to pass the variable argument in the Route

Route::get('/search/{searchName}', 'TeachersController@ajaxsearch');

and make necessary corrections in your controller

public function ajaxsearch($searchname){
   if($searchname != ""){
       $teacher = Teacher::where ( 'efirst', 'LIKE', '%' . $searchname.'%' )->paginate(10);
       return response()->json($teacher);
   }
}

Next, utilize the $.get method in JQuery for AJAX requests using the GET Method

<script>
    $(document).ready(function(){
        $('#searchname').on('keyup', function(){
           var text = $('#searchname').val();
            $.get(urlHere, function(response){
                console.log(response);
            });
        });
     });
</script>

Check your console tab for the response

Answer 8

To begin with, try visiting the URL manually and entering parameters.

If you receive a response, it indicates that your PHP is functioning correctly.

If you encounter an error, it means you are using the GET method. Be sure to pass the variable argument in the Route

Route::get('/search/{searchName}', 'TeachersController@ajaxsearch');

and make necessary corrections in your controller

public function ajaxsearch($searchname){
   if($searchname != ""){
       $teacher = Teacher::where ( 'efirst', 'LIKE', '%' . $searchname.'%' )->paginate(10);
       return response()->json($teacher);
   }
}

Next, utilize the $.get method in JQuery for AJAX requests using the GET Method

<script>
    $(document).ready(function(){
        $('#searchname').on('keyup', function(){
           var text = $('#searchname').val();
            $.get(urlHere, function(response){
                console.log(response);
            });
        });
     });
</script>

Check your console tab for the response

Trouble with the Ajax search feature in Laravel

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Generating JSON responses using Django REST framework to facilitate table visualizations on the front end

The complexity of managing multiple parameters in Laravel routing can often cause conflicts with other routes

Extract data from an ajax request in an AngularJS directive and send it to the controller

delaying the alteration of an image attribute following an AJAX call

Ways to handle the ajax callback content

Retrieving the current user using Vue/Axios within the Laravel framework

The JSON node fails to return a value after inserting data through an ajax request

Unable to clear Laravel Application cache using deployment script

Can I receive a PHP echo/response in Ajax without using the post method in Ajax?

Cross-origin resource sharing problem arises when JavaScript is loaded asynchronously using script tags created dynamically

The jQuery ajax function functions flawlessly on a local environment, but encounters issues when used on a

Basic use of AJAX for sending the value from jQuery's datepicker

the modal body is taking longer than expected to load with ajax

Ajax response values overlap

Having trouble sending data to an API through jQuery: the function is not functioning properly

How can I update the value of a span element that was added to the HTML document through an AJAX request?

Enhancing Website Performance with Vue.js 2.0 Lazy Loading

What is the best way to assign a jQuery variable to a PHP variable?

Searching in Django utilizing jQuery keyup

Calling an ajax request to view a JSON pyramid structure