Filter Search on collection, logic

I read about working it out through an ajax request, but somehow it doesn't work, yet.

This is the current setup

HomeController.php

public function search(Request $request){


    if($request->ajax()){

      $output="";

      $users=DB::table('users')->where('first_name','LIKE','%'.$request->search."%")->get();

      if($users){

        foreach ($users as $key => $user) {

          $output.='<tr>'.

          '<td>'.$user->id.'</td>'.

          '<td>'.$user->first_name.'</td>'.

          '</tr>';

        }

        return Response($output);

      }
    }
  }

web.php

Route::get('/searchusers','HomeController@search');

View:

<div class="form-group">

   <input type="text" class="form-controller" id="search" name="search"></input>

</div>

<table class="table table-bordered table-hover">

           <thead>

             <tr>

               <th>ID</th>

               <th>First Name</th>
 
             </tr>

           </thead>
</table>

<script type="text/javascript">
  $('#search').on('keyup',function(){
   
  $value=$(this).val();
   
  $.ajax({
   
  type : 'get',
   
  url : '{{URL::to('searchusers')}}',
   
  data:{'search':$value},
   
  success:function(data){
   
  $('tbody').html(data);
   
  }
   
  });
   
   
   
  })
   
  $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
</script>

Are there any obvious mistakes?

It would definitely be better in a Vue component since Vue is reactive but what you have should work. Personally if it were me I'd get your html out of the controller and just return the data and have your javascript populate the table.

public function search(Request $request) {
    if ($request->ajax()) {
        $users = DB::table('users')->where('first_name','LIKE','%'.$request->search."%")->get();

        return response()->json(['users' => $users], 200);
    }

    return something_else;
}

$('#search').on('keyup', function () {
    $.ajax({
        type : 'get',
        url : '{{URL::to('searchusers')}}',
        data:{ 'search': $(this).val() },
        success: function (data) {
            $('tbody').empty();
            
            $.each(data.users, function (user) {
                $('tbody').append("<tr><td>" + user.id + "</td><td>" + user.first_name + "</td></tr>");
            });
        }
    });
});

Thanks again @realrandyallen

Tried to compile the component, I get Syntax Error: Unexpected token for the '{{URL::to('searchusers')}}', line.

Change the quotes surrounding the url to double quotes

The component is now triggered within the view, but the instance has no reactive state. @realrandyallen

<template>
    <div class="container>
        <div class="form-group">

            <input type="text" class="form-controller" id="search" name="search"></input>

        </div>

        <table class="table table-bordered table-hover">

            <thead>

                <tr>

                    <th>ID</th>

                    <th>First Name</th>

                </tr>

            </thead>
        </table>
    </div>
</template>


<script>
    export default { 

        mounted() {
            console.log('Component mounted. ?')
        }
    };


    $('#search').on('keyup', function() {
      
       $.ajax({
           type : 'get',
           url : "{{URL::to('searchusers')}}",
           data:{ 'search': $(this).val() },
           success: function (data) {
               $('tbody').empty();
               
               $.each(data.users, function (user) {
                   $('tbody').append("<tr><td>" + user.id + "</td><td>" + user.first_name + "</td></tr>");
               });
           }
       });
     });

</script>

I didn’t realize this was inside a Vue component - that kinda changes everything - you could move your jQuery code up inside the mounted function but this should be done differently in a Vue component

I created a component, as you recommended it to better be in a Vue component, sorry for the confusion. @realrandyallen

@splendidkeen

When starting with Vue it can be hard to stop thinking in dom manipulating terms (jQuery).

Try this version:

<template>
    <div class="container>
        <div class="form-group">
          <input type="text" class="form-controller" v-model="search" @change="search"></input>
        </div>
        <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in users">
            <td>@{{ user.id }}</td>
            <td>@{{ user.name }}</td>
          </tr>
        </tbody>
        </table>
    </div>
</template>
        

<script>
    export default { 
        data: {
             search: '',
             users: []
        },
        mounted() {
            console.log('Component mounted. ?')
        },
        methods: {
          search: function() {
            var self = this;
            $.ajax({
               type : 'get',
               url : "{{ URL::to('searchusers') }}",
               data:{ 'search': this.search },
               success: function (data) {
                   self.users = data.users;
           }
          }
        }
    };
</script>

So, you add the users array to Vue, and in the template loop over all users (there wont be any on load)

And we link the search field to the data.search key, and @change will run the search method every time the value changes.

Never try to manipulate the dom directly with Vue, just manipulate your dataset and have the DOM react to those changes instead.

Thank you for your advice with the dom @lostdreamer_nl

Within my console I get two Vue:warns, and a jquery error

<script>
    export default { 
        data: {
             search: '',
             users: []
        },
        mounted() {
            console.log('Component mounted. ?')
        },

        methods: {
          search: function() {
            var self = this;
            $.ajax({
               type : 'get',
               url : "{{ URL::to('searchusers') }}",
               data:{ 'search': this.search },
               success: function (data) {
                   self.users = data.users;
           }
          });
        }
    }
};
</script>

 The "data" option should be a function that returns a per-instance value in component definitions.
Property or method "users" is not defined on the instance but referenced during render.

GET https://code.jquery.com/jquery-latest.js net::ERR_CONNECTION_REFUSED

and the input contains a value of

function () { [native code] }

Aah yes, I didnt see it was a component:

        data: {
             search: '',
             users: []
        },
// should become
        data: function() {
             return {
               search: '',
               users: []
             }
        },

The jquery one is ERR_CONNECTION_REFUSED, that's up to you, your internet, or that server to fix ;)

Thanks for coming back @lostdreamer_nl

Now we get:

[Vue warn]: Method "search" has already been defined as a data property.

Uncaught TypeError: fns.apply is not a function

CONNECTION_REFUSED was based on an internet problem

I should really test instead of write :p

// rename search method to doSearch
        methods: {
          search: function() {
            var self = this;
            $.ajax({
               type : 'get',
               url : "{{ URL::to('searchusers') }}",
               data:{ 'search': this.search },
               success: function (data) {
                   self.users = data.users;
           }
          });
        }
// becomes 
        methods: {
          doSearch: function() {
            var self = this;
            $.ajax({
               type : 'get',
               url : "{{ URL::to('searchusers') }}",
               data:{ 'search': this.search },
               success: function (data) {
                   self.users = data.users;
           }
          });
        }

and

<input type="text" class="form-controller" v-model="search" @change="search"></input>
// becomes
<input type="text" class="form-controller" v-model="search" @change="doSearch"></input>

Thanks, the changes worked, but as I try to search users with my method search()

public function search(Request $request) {

        if ($request->ajax()) {
            $users=DB::table('users')->where('first_name','LIKE','%'.$request->search."%")->get();

            return response()->json(['users' => $users], 200);

        }

        return view('/', compact('users'));
    }

Nothing will be triggered or show, the array accepts the input, but no users will be shown.

Are there problems with the function? @lostdreamer_nl

Console:

/%7B%7B%20URL::to('searchusers')%20%7D%7D?search=phi 404 (Not Found)

Oooh right.... you're doing this in .vue files, not in blade....

Right now, it's trying to go to the URL /{{ URL::to('searchusers') }}?search=phi

You'll either have to hard code URL, or put it in a javascript variable in the DOM.

At this stage, I suggest to hard code it, and learn Vue first before going the long way of getting routes in javascript ;)

// so replace
            $.ajax({
               type : 'get',
               url : "{{ URL::to('searchusers') }}",
               data:{ 'search': this.search },
               success: function (data) {
                   self.users = data.users;
           }
// with
            $.ajax({
               type : 'get',
               url : "/search",
               data:{ 'search': this.search },
               success: function (data) {
                   self.users = data.users;
           }

Or whatever the URL is to the search page

Thank you both @realrandyallen and @lostdreamer_nl for your help.