Laravel 10: Autocomplete search works ONLY on name field

PHP
1

Hey Guys,

I found a tutorial on how to create a “autocomplete” field but the tutorial only focuses on searching the “name” field. name field is the generic database table field created by laravel 10 default installation.

Problem: when I change the search criteria from “name” to “fname” or “lname” field it fails to produce any results and nothing seems to appear. On the other hand if I changed the search criteria back to “name” field it works!

  • Laravel 10
  • confirmed both field names: fname, lname

What am I missing???

User entry form:

<input class="typeahead form-control" id="search" name="search" type="text">
	<script type="text/javascript">
		var route = "{{ route('autocomplete') }}";
		$('#search').typeahead({
				source: function (term, process) {
					return $.get(route, {
						term: term
					}, function (data) {
						return process(data);
					});
				}
			});
	</script>

Laravel 10 controller:

 public function autocomplete(Request $request): JsonResponse
    {   $fineWord = $request->get('term');
        $data = User::select('fname')
                    ->where('fname', 'LIKE', '%'. $fineWord . '%')
                    ->get();
                    
        return response()->json($data);
    }
2

Does the User object contain an accessible fname?

3

also, what does process() do?

4

Assuming your referring to the model, and yes its confirmed.

5

Good question, the tutorials are’t very detailed but something to look at…

6

“the tutorials” means nothing to me.

7

Hey M_hutley,

I’m still lost as to why typeahead isn’t working. the results hasn’t change other the the field name.

I attached results and images, you can give me some direction

The screenshot from Edge developer tool:.

Screenshot1
Screenshot11002×761 49.6 KB

screenshot of user entry field

Screenshot2
Screenshot2748×785 46.5 KB

sample user entry field:

Using: “name”
[{“name”:“Jarod Kessler”},{“name”:“Delpha Sipes III”},{“name”:“Octavia Borer”},{“name”:“Dr. Ali Koch”},{“name”:“Carrie Waelchi”},{“name”:“Gracie Parker”},{“name”:“Zane Ledner MD”},{“name”:“Miss Maia Rau”},{“name”:“Edgardo Quigley”},{“name”:“Leola Mohr”},{“name”:“Raven Lesch Jr.”},{“name”:“Prof. Maybelle Schulist MD”},{“name”:“Brandyn Keeling”},{“name”:“Carlotta Schoen”}]

Using: “fname”
[{“fname”:“Jarod”},{“fname”:“Delpha”},{“fname”:“Octavia”},{“fname”:“Ali”},{“fname”:“Carrie”},{“fname”:“Haylee”},{“fname”:“Savion”},{“fname”:“Walton”},{“fname”:“Natalee”},{“fname”:“Ayla”}]

8

I cant answer this question without knowing what process() does.

9

I am sure, you do not add jquery typeahead and bootstrap into your web page. Please it add something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel 11 Typeahead Autocomplete Search Example - Tutsmake.com</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container {
      padding: 10%;
      text-align: center;
    }
  </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12"><h2>Laravel 11 Typeahead Autocomplete Search Example - Tutsmake.com</h2></div>
        <div class="col-12">
            <div id="custom-search-input">
                <div class="input-group">
                    <input id="search" name="search" type="text" class="form-control" placeholder="Search" />
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript">
    var route = "{{ url('search-autocomplete') }}";
    $('#search').typeahead({
        source:  function (term, process) {
            return $.get(route, { term: term }, function (data) {
                return process(data);
            });
        }
    });
</script>
</body>
</html>

For more detailed, you can also consider it: https://www.tutsmake.com/laravel-bootstrap-typeahead-autocomplete-search-example/

10

I’m confused. How is your answer:

different from what the user has already got and says doesnt work?

Also how do you say

when your answer contains the lines

?

11

sorry it’s was my mistake, please consider the following code for this error.

     public function searchAutocomplete(Request $request)
    {
          $search = $request->get('term');
     
          $result = User::where('fname', 'LIKE', '%' . $search . '%')->pluck('fname');
          
          return response()->json($result);
           
    }
12

Hey! If your autocomplete works with "name" but not with “fname” or “lname,” it’s likely due to a mismatch in the field names or the data types in your database. Double-check that “fname” and “lname” exist in your database schema and are correctly populated with data. Also, verify your search query syntax, ensuring it accurately queries these fields. Additionally, inspect any frontend code or JavaScript to ensure it’s referencing the right fields. Finally, clear your Laravel cache with php artisan cache:clear and rebuild your application to see if that resolves the issue.