Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

warrence's avatar

Need help on something

Hi everyone,

i would like to do something like, user will enter user_id into a text box, by the time user leave the text field, it will auto search for the user name and other information and then display beside the user_id text box. I know this need jquery to get data from database and display the data from the ajax result, but I'm not very sure how to do this. Can you some help me please? Thanks

0 likes
12 replies
stefanbauer's avatar

You totally described it correctly :-) (in an easy way). Just do it :-)

  • Create a route for returning the result
  • Implement that (fetch the id from the request, do the database query, and return it (as json))
  • Implement the view with the textfield
  • Implement jquery on the textfield with an event when keyup, fire this ajax request to that created route above with the entered id
  • Process the ajax request response and display the name with jquery.

Finished :)

shez1983's avatar

you might want to look at jquery autocomplete.. if you are using JQUERY... (Other JS Libraries will also have similar stuff)

warrence's avatar

Can anyone provide sample code? Thank you so much :)

1 like
bestmomo's avatar

Little functional example on @stefanbauer scenario :

Routes :

Route::get('/', 'TestController@index');
Route::get('name/{id}', 'TestController@name');

Controller :

class TestController extends Controller
{

    public function index()
    {
        return view('index');
    }

    public function name($id)
    {
        // Get id from database, just skiping this step there
        $name = 'some_name';

        return response()->json(['name' => 'some_name']);
    }
}

View :

<!DOCTYPE HTML>
<html>

  <body>
    {!! Form::text('id') !!} 
    <div id="name"></div>
  </body>

  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
  <script>
    $(function () {
      $('input').keyup(function() {
        $.ajax({
            method: 'get',
            url: 'name/' + $(this).val(),
            dataType: "json",
            success: function(data){
               $('#name').text(data.name);           
            },
            statusCode: {
                500: function() {
                    // 
                },
                422: function(data) {
                    // 
                }
            }
        });         
      });
    });
  </script>
</html>
2 likes
jlrdw's avatar

@bestmomo good example, you could also have a link that user hits to kick in the jquery. Several ways to do it.

bestmomo's avatar

@jlrdw sure there are several ways to do it and I think keyup event is not the best ^^

warrence's avatar

Hi, i try to place the ajax inside my blade template but receive this error

"ReferenceError: $ is not defined"

How to fix this?

shez1983's avatar

dont put it there hehehehe!

what are you trying to do.. you need to use javascript.. not put it in your template..

Please or to participate in this conversation.